How to Display Avatar in Circular in WordPress

In today’s tutorial, we’d like to show you a basic tutorial on designing your avatar on your site to display them in circular. You probably have noticed a trend of circular avatar like this:

It’s really easy to do so, thanks to the new CSS3 property, border-radius. To make it circular, you may add border-radius: 50% to .avatar class like so:

.avatar {
   border-radius: 50%;
}

If the the .avatar class is already defined somewhere else in your theme’s style.css file, you may simply add the border-radius property to it. This should work on most WordPress themes as the Gravatar being displayed is using the .avatar class. Adding the border-radius property to the .avatar class will make the avatar to be displayed in circular sitewide, be it in your comment section, post, page or author box.

That’s all you need to do to display the avatar in circular on your WordPress site. It’s that simply. Don’t forget to subscribe to our RSS and follow us on Twitter and Google+ for more awesome WordPress tutorials.