How to Change Profile and Member Page Profile Pictures from Round to Square

Introduction

BuddyBoss displays profile pictures as circular by default on Profile pages and the Member Directory. You can change this appearance to a square shape using a small CSS snippet, giving profile images a sharper and more structured look. This guide explains how to change profile and Member Page Profile Pictures from Round to Square.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

1. Go to BuddyBoss > Theme Options in your WordPress admin dashboard
   
2. Open the Custom Codes section
   
3. Enable CSS
   

Square profile picture on the Profile page

Add the following CSS code to change the profile picture shape on individual Profile pages:

#buddypress .users-header .centered #item-header-cover-image.bb-enable-cover-img #item-header-avatar img {

    border-radius: 0px !important;

}

Square profile picture on the Member Directory page

Add the following CSS code to change the profile picture shape on the Member Directory page:

#friend-list.item-list .item-avatar img,

#members-list.item-list .item-avatar img {

    border-radius: 0;

}

You may use either snippet individually or apply both, depending on where you want the square profile images to appear.

4. Click Save Settings to apply the changes
   

Note: Modifications are typically considered custom work, but we are making an exception in this case. Please review the BuddyBoss Support Policy.

Troubleshooting and FAQs

Q: The profile pictures are still round after adding the CSS.
A: Clear your browser cache and any site or caching plugin cache, then refresh the page.

Q: Can I apply this only to the Profile page or only to the Member Directory?
A: Yes. Add only the CSS snippet for the page you want to modify.

Q: Can I revert the profile pictures back to round later?
A: Yes. Remove the CSS code and save your changes to restore the default rounded style.