How do I make avatars round

How i Change this from Square to Round?

Sorry i dont know where to post!

1 Like

Without the original image here, it is difficult to know. Avatars are cropped by a circle by default. This is probably either caused by that site’s customization, or the image itself has a transparent background.

4 Likes

Okey then its the customization :smiley:

1 Like

i know it’s been awhile for this topic but i just thought i would add that one can control degree of rounding of avatars in CSS with the border-radius setting (i have ours at 6px):

img.avatar {
  border-radius: 6px;
}

the higher the number, the more rounded corners. setting it to 0 makes avatars perfectly square. i think 24px makes them perfectly round. so you can be quite granular in how you want avatars to appear. you can make square avatars look like they’re retro old tv screens. lol

note: avatar rounding can appear a bit different between desktop and mobile views so may want to control it separately there.

2 Likes

There’s also a theme-component that may be quite useful too - Avatar Size and Shape :+1:

3 Likes

oh cool i didn’t see that one. thank you.

2 Likes

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.