WordPress – Round Gravatar Images

Recently, 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 the circular 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 {
<code>border-radius: </code><code>50%</code><code>;
-moz-border-radius: <code>50%</code><code>;
-webkit-border-radius: <code>50%</code><code>;

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:

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.

Looking for quality WordPress Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under WordPress | RSS 2.0

Author Spotlight

TJ Marsh

My name is Tj Marsh. I spend about 16 hours a day on the internet. Running my company and helping out here at Arvixe. I live in the good ole Arizona where it gets ridiculously hot. I love WordPress and a lot of other open source software along with coding.

One Comment on WordPress – Round Gravatar Images

  1. You’re code tags are getting in the way of the actually CSS code. It should be:

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

    Thanks for the useful article!

Leave a Reply

Your email address will not be published. Required fields are marked *