Rounded user avatars

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Hi there !

If you like to follow the look and styling of the Customizr rounded images for featured pages and post thumbnails here is how you can turn your square user images (gravatar and local) to rounded ones, or just with rounded corners. It will affect user images in comments and author-info boxes too.

Where to copy/paste this code? The simpliest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then a strongly recommend to create a child theme. Everything you need to know about child theme with Customizr here.

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

If you want to round only image (gravatar) in author info box then you should use

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

To be more fancy, you could add border around image by adding line bellow in existing rule, e.g.:

border: solid 2px silver;

To achieve only rounded corners on square avatar image you need to change border-radius value to, let me say, 10%.

Leave a comment

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

21 thoughts on “Rounded user avatars”