1. Home
  2. WordPress Tutorials
  3. How to Show Round Gravatar Images in WordPress
Experience Faster, Secure and Eco-Friendly Web Hosting for your Website or Blog. Learn More.


How to Show Round Gravatar Images in WordPress

Do you want to show round gravatar images on your WordPress website? Gravatars are globally recognized avatars used in the WordPress comments section. By default, gravatars are square shaped but can be changed to a round shape. The round shape is made by controlling the border-radius of all gravatars.

The border change will make the square corners become rounded by filling them in. In theory, you can make any shape if you are creative enough with WordPress CSS styling. Gravatars are very easy to set up and should be one of the first things set up on a new website. Today, I will demonstrate how to show round gravatar images in WordPress by styling CSS.

Why Should You Round Gravatar Images

There is no correct answer or particular reason to round Gravatars. It is up to the preference of the web developer of the website. Like many design choices, it is simply a choice that is made and can be changed at any time. Gravatars have a lot of customization options as long as you are creative. The issue is that they are not very simple or intuitive for beginners.

You would think that a popular feature like Gravatars would have an easy to use settings page, but you would be wrong. Most aspects of Gravatars need to be changed through styling and code editing. Of course, their popularity has never been diminished because of it.

How to Show Round Gravatar Images in WordPress

Today, I will demonstrate how to show round gravatar images in WordPress, by styling CSS. Adding CSS code to WordPress is easy and is one of the most important skills a web developer can have on the platform. CSS is used to alter the design of objects that appear on your website. What you can do with CSS is limited to how your theme is coded. Some themes may have better styling options than others.

Adding Custom CSS

Adding custom CSS to WordPress is an extremely quick process.  On the left-hand admin panel, click on Appearance and select the Customize option.

Click on Appearance and select the Customize option.

Select the Additional CSS option on the bottom left-hand side. Here you can add custom CSS to your WordPress website. If you insert code that would break your website, you will be warned and not allowed to publish the code.

Select the Additional CSS option.

Copy and paste the following code into the available text box. You may notice that it says avatar instead of gravatar, but they will both be altered: 

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

Feel free to edit this code to your liking. CSS is very easy to manipulate as long as you understand the language. Click on the “Publish” button when you are done.

Click on the "Publish" button.

You can now visit your website and see the changes to your gravatars. Feel free to play with the code to create other shapes.

Before and after.

Congratulations, you have successfully changed the shape of your gravatar. If this method does not have the desired effect, then your theme is to blame. It is likely that you will have to add code to your theme’s files to make it work. What you need to add is different for every theme. This may be a good time to install a new theme that is better coded.

Your Website’s Design is Up to You

There are a countless number of website design guides and none of them are perfect. Website design choices are completely up to the web developers, but you should always listen to your visitors’ feedback. You are the one who creates, while they are the ones who experience and sometimes the experience is not fun.

Every website, large or small, will be redesigned at some point. Some websites will get it right from the start while others will not and that’s ok. What is important is fixing it and addressing feedback as quickly as possible. A website or business who does not listen or reply to and addresses feedback looks like it has something to hide.

Why did you want rounded Gravatars on your website? Are there other shapes you would like to use?

Author: Ron Helms

I currently work for GreenGeeks as a Support Technician. My primary roles are supporting our VPS and Dedicated server clients, as well as performing site migrations. With experience in the web hosting industry since 2009, there is rarely a question I can’t help answer. In my spare time, I enjoy gaming and working on cars as an automotive enthusiast.

Updated on February 28, 2018

Was this article helpful?

Related Articles

Add A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.