diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 0cb616f46b..81c938c05c 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -18,9 +18,9 @@ export default {
   computed: {
     classes () {
       return [{
-        'user-card-rt': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
-        'user-card-r': this.rounded === true,   // set border-radius for all sides
-        'user-card-b': this.bordered === true   // set border for all sides
+        'user-card-rounded-t': this.rounded === 'top',  // set border-top-left-radius and border-top-right-radius
+        'user-card-rounded': this.rounded === true,     // set border-radius for all sides
+        'user-card-bordered': this.bordered === true    // set border for all sides
       }]
     },
     style () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index b90f57a139..cc2ce6b8fe 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -161,22 +161,21 @@
     text-align: center;
   }
 
-  //
   // Modifiers
 
-  &-rt {
+  &-rounded-t {
     border-top-left-radius: $fallback--panelRadius;
     border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     border-top-right-radius: $fallback--panelRadius;
     border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-r {
+  &-rounded {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
 
-  &-b {
+  &-bordered {
     border-width: 1px;
     border-style: solid;
     border-color: $fallback--border;