How to Customize WordPress BuddyPress Avatars With CSS

Here, we’ll show you how to customize BuddyPress avatars with CSS. Use CSS carefully when customizing BuddyPress Avatars. For example, if you’ll implement CSS to size avatars up to a larger size, it will result in distorted and fuzzy avatars. But, if you’ll implement CSS to size down the avatars, you’ll get the good results.


BuddyPress uses “avatar” class for styling avatars. So, you’ll have to target this class in your main BuddyPress theme or child BuddyPress theme. Below is an example of BuddyPress’ CSS for avatars for displaying in circles.

[code type=”php”]
img.avatar {
-o-border-radius: 50%;
-ms-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff;
box-shadow: 0 1px 0 #fff;

By using the above example, BuddyPress’ avatars will be circular.

Duan Lingxin

Duan Lingxin

Content crafter and chief editor at Scratching Info. Also regular contributor on other major online tech platforms. Security Specialist by day and a writer by night, he does his best to instill his knowledge about tech while delivering inspiring and life changing resources through his writing,

More Posts - Website

Leave a Comment