Styling Common Web Page Parts
Make profile pictures or avatars circular.
Skill ID: StylingCommonParts_21
Description: Turn square or rectangular images into perfect circles.
Where to apply: User comments, team member pages, social media style UIs.
Key Tailwind Classes:
rounded-full
Gotcha:
rounded-full
works best on images that are already square. If applied to a rectangular image, it will create an ellipse (oval). To ensure a perfect circle, make the image container square (
w-12
h-12
) and use
object-cover
on the <img> tag inside it.