Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Display Round Gravatar Images in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Recently, we showed you how to style your comments layout and how to style your comment form. One of our users emailed us and asked “how did you make your gravatar images round? Are you storing gravatar images locally to get them to be round?” In this article, we will show you how to display round gravatar images in WordPress. We will use the border-radius property of CSS3 to create circular gravatar images.

First thing you need to do is edit your theme’s style.css file. You can do this by using a FTP program or by going to Appearance » Editor in your WordPress admin. Next, you want to add the following code in your CSS file:

.avatar {
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}

This should work on most WordPress themes. However, if this does not work on your theme, then there is probably some plugin or your theme function messing with the default classes used for gravatar in WordPress. In order to find out which css class gravatar images are using in your theme, you need to open a blog post that has comments. Scroll down to the comments section, and right click on the gravatar image to select Inspect Element. It will show you the source code for your gravatar, like this:

Finding css class used by gravatar icon

If the gravatar image has something other than avatar then use that instead of .avatar in the above css code.

We hope that this article helped you display round gravatar images on your WordPress blog. Let us know if you have any questions or feedback by leaving a comment below.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

21 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Nataly says

    hello, It worked, thank you, but, the description appear to high. over the pic, do you know to make it appear at the side of the pic?

  3. Therese says

    I can’t make it work. :(
    I can’t figure out where exactly to put it, nothing seams to change. I’ve looked at the source code and it’s got avatar just like the example source code.

      • ERFmama says

        Yes I did. I have the Twenty Twelve theme.
        Is there a specific place it has to go? In the style.css

        Edit: Never mind it suddenly worked now! :D

        Can I ask how to change the size of the avatars please? Or have you already written that down somewhere?

        Thank you so much for this!

  4. Jacky says

    THANK YOU so much for this, spent hours trying to accomplish. You provided the most straightforward solution!

  5. Abdul Samad says

    Bro Thanks For This Code I’m New In WP and I really Enjoying Your Blog Man Thanks For THis And All Tutorials ….

  6. Richie says

    I was going to pass along this tip and of course tried it first on one of my sites.

    Worked like a champ I simply changed my CSS from px to % for the border moz and webkit.

    Here’s where it got interesting.

    I went to another site, did the same tweak and it didn’t work. After a little head scratching I remembered that I had the plugin WP User Avatar installed on the site that it worked on and didn’t have it installed on the site it didn’t work on.

    I installed the plugin and whalah, works like a champ.

    For both sites I’m using a custom theme built on the Presswork framework.

    Bottom line, I got it to work but only with the plugin.

    Any ideas?

  7. RW says

    I agree and I only use IE about 4% of the time but several of my customers are still on 8.

    Thanks,
    Bob

  8. RW says

    Great tip. Please note that IE8 doesn’t natively render round corners (border-radius). You’d need to use javascript, pie, etc… for this but not worth the trouble. Luckily IE9 recognizes current standards…

    Thanks.

    • Jim Burnett says

      I remember the days we were trying to keep IE6 support in the loop. Not it’s IE 8 for rounded corners. Lucky us, IE9 is picking up.

      Then again, FF 3.0 doesn’t support any HTML 5. *sad face*

      Cool CSS trick though!

Leave a Reply to Editorial Staff Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.