Rounding Gravatars in WordPress

The solution is very simple. You don’t need to use any special software to create a rounded Gravatar image. Well, you can but other images will be not rounded (think about the comment section). In order to round all Gravatar images you need to add a few lines of CSS code to your stylesheet and it will do the trick for you. Today, we will show you how to make your WordPress Gravatar images rounded.

Find and open your website’s style.css file (we recommend to do it in your child theme). If you need help with a custom CSS please see How to Add a Custom CSS to Your WordPress Theme post. Then just add the following lines of code:

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

By default, WordPress adds .avatar class to the Gravatar image. If the custom CSS does not work then it might be that one of your plugins or current theme’s function is changing the class name.

You can find the class name by using a Chrome DevTools. Just do a right click on an image and then select Inspect Element from the context menu.

tasko_find_class

Please see compatibility table for the border-radius property because some browsers might now support it. Also, you can try this website to generate a “border-radius” css code with a live preview.

Posted in Tips, WordPress

Taras Dashkevych

More Posts by Taras
Taras Dashkevych is a founder of Themes Harbor. He specializes in creating simple, elegant, and powerful website designs. His passion for design can be seen through the clean lines and inspired themes that he creates for people all around the world. Connect with him @TarasDashkevych.

One comment

  1. I had been trying to figure out how to round my Gravata without success. Thank you very much for sharing this.

Leave a Reply

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