How do I make avatars round

AI-generated summary

The discussion revolves around making avatars round. Funkel initially posted an image and asked how to change a square avatar to a round one. featheredtoast suggested that it might be due to the site’s customization or the image’s transparent background. Lilly provided a solution using CSS, specifically the border-radius setting, which allows for granular control over the degree of rounding. A higher number results in more rounded corners, with 24px making avatars perfectly round. Lilly also noted that avatar rounding may appear different between desktop and mobile views, suggesting separate control for each. Additionally, JammyDodger shared a useful #theme-component for customizing avatar size and shape, which can be found on the Meta Discourse website.

How i Change this from Square to Round?

Sorry i dont know where to post!

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.

Okey then its the customization :smiley:

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.

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

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