BuddyPress.org

I’m trying to figure out how to make a style.css modification (In my child theme) contingent on a user Profile Field. So when a user selects one of three options in the field, it causes one of three different colored boarders to surround their user avatar. I know the style.css needed is roughly;

img.avatar {
    background: #ffffff;
    padding: 4px;
    border: 1px solid #ddd;
}

img.avatar.user-1-avatar {
    background: #ebf7ff;
    padding: 4px;
    border: 1px solid #ddd;
}

But don’t know how to make it responsive to a profile field.

I’m using BuddyPress v1.9.1 and WordPress 3.8.1. http://backpackersjournal.com/ is the site.

Thanks for any help you can offer!