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.

Leave a Comment