How to make ROUND avatars

[Carla the Moose]

Hi folks . . .

I love the round avatars that WooThemes uses. I easily made the borders round by doing this:

`.avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}`

But you can see square sides on the avatar inside the round border. It looks like the WooTheme demos displays round avatars in multiple browsers. They used "100px 100px 100px 100px" for the radius. This didn't round the image for me.

WooThemes Demo

There have been some issues with certain browsers displaying squares, but WooThemes seems to have tackled this problem from what I can tell.

Note that my site isn't public yet. I'm using the eleven40 theme.

Any suggestions?

Thanks!

[AnitaC]

In a theme I am customizing, the border radius is set at 50% like this:

border-radius: 50% 50% 50% 50%;

Try that to see if it works for you.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

Thanks, anitac. I tried that, but it didn't work.

What displays is round, but you can see the square sides of the avatar inside the round border.

So what I've managed to do was round the border, but it looks like the image needs to be rounded, too. I wonder if image size has something to do with this. Maybe the image doesn't need to be rounded, but with some sizing constraints you can make it appear to be round?

I'll post back here if I figure it out.

[Carla the Moose]

I just took another look at the WooThemes round avatars. They use an avatar wrap with some additional CSS. Let's see if I can make it work.

Do any of the StudioPress themes use round avatars?

Thanks!

[AnitaC]

None of them use round avatars but Minimum uses round shapes for social media.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

Nothing is working. I'm using a functions code snippet to address the avatar size. I applied a border-radius to .avatar in my CSS. That makes the avatar round. But add a border, and the avatar sides become square. I applied the radius to just img.avatar, which works too. But I can't include a border without getting sharp edges around the image.

I've looked high and low and can't figure out what's causing this. Lots of people seem to be able to do this by adding a border and border-radius to .avatar with no problems.

Curious. Any suggestions?

[AnitaC]

One of the key things you wrote in the beginning is this "Note that my site isn’t public yet. I’m using the eleven40 theme."

It is really difficult for us to zero in on specific elements and code if we can see you website. So maybe when you are at a point where you can share your URL, we can help you better.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

On the first post of the eleven40 demo, there are six comments. Since my comments section is identical to the demo, you can easily see what's going on by clicking here:

http://demo.studiopress.com/eleven40/threaded-comments/#comments

It looks like I need to wrap the avatar image in a div. Someone told me elsewhere that padding is treated as part of the element. If I want padding and a border, I can't just do what you did and insert border-radius on the avatar.

On the demo, if you remove the padding and border, and then insert border-radius, you get a nice round avatar. But add back in the padding and border, and the sides get squared.

[AnitaC]

Look for this in your style.css - add the border-radius you see in there that I "added" and the avatar will be round.

.avatar, .featuredpage img, .featuredpost img, .post-image {
     background-color: #F5F5F5;
     border: 1px solid #DDDDDD;
     border-radius: 50% 50% 50% 50%;
     padding: 4px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

Thank you, Anitac. I do appreciate your time with this.

Adding border-radius makes the avatar round, but because of the padding the actual image retains square sides within the rounded shell.

I'm trying to get the avatar image and the shell (for lack of a better term) nice and round, so that it looks like a circle within a circle with some white padding.

🙂

[AnitaC]

What I gave you does that? Did you apply the code I gave you? It makes the border round and the image round. Again, if I cannot see YOUR WEBSITE to see WHAT YOU HAVE.... it's pretty hard to assist you. But what I gave you works - the container and the image are both round. If you want the padding to be wider - change the 4px to a larger number.

---

Need help with customization or troubleshooting? Reach out to me.

[Carla the Moose]

I'm using the most recent version of Safari. In Safari I'm seeing square edges.

In Firefox and Chrome things are nice and round.

EDITED TO ADD

From what I'm reading, this is a known browser issue. The solution is to wrap a div around the image. I already read that, but couldn't figure out why it seemed to be working for others just fine. But now it appears to be the browser. I'll post back once I've tested it with the div.

🙂

[Carla the Moose]

Wrapping the image in a div works. Add the border radius to both the image and the div, and then add the padding and border to the div for a circle within a circle. Just make sure your image is perfectly square.

[Author]

Posts