Many of you may have noticed a new trend of circular shape avatars (profile images) in author bio as well as in comments section. You may also be wondering how it’s done or do I need to edit them in Photoshop to make it circular. Editing your avatar in image editing software will only make your profile image rounded but you cannot do the same for avatars in your comments section. The solution is very simple and you don’t need to use any special software to create circular shape avatars in WordPress. In this article, I will show you how to make your WordPress avatar images rounded.

In order to display circular shape avatar images you need to add a few lines of CSS code to your stylesheet and it will do the trick for you. It’s just rounded corners using border-radius property in CSS3 and all modern browsers these days support the border-radius property. We can apply this CSS style to .avatar class that WordPress adds to all avatar/profile images.

Open your website’s style.css and paste this CSS code at the very bottom. And now you will have circular shape avatars all over your website. It’s very unlikely but if your WordPress theme uses different CSS class for avatars then you will have to define class name accordingly in following code, before adding it to your style.css.

/* display circular shape avatars in wordpress */
.avatar {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}