diff --git a/src/components/card/UserCard.vue b/src/components/card/UserCard.vue
index 26a18ae..bb5a6d7 100644
--- a/src/components/card/UserCard.vue
+++ b/src/components/card/UserCard.vue
@@ -375,6 +375,7 @@ const onVideoCall = () => {
         height: 100px;
         position: absolute;
         top: 35px;
+        border: 2px solid #fff;
       }
 
       .gender {
diff --git a/src/components/common/UserAvatarIcon.vue b/src/components/common/UserAvatarIcon.vue
index 49842a5..fc5af0a 100644
--- a/src/components/common/UserAvatarIcon.vue
+++ b/src/components/common/UserAvatarIcon.vue
@@ -63,7 +63,7 @@ const statusCircleColor = computed(() => {
 
 <template>
   <div class="user-avatar-box" :style="{ width: avatarSize + 'px', height: avatarSize + 'px' }">
-    <el-avatar v-if="isShowImg" :src="props.showAvatarThumb" :size="avatarSize" />
+    <el-avatar class="avatar" v-if="isShowImg" :src="props.showAvatarThumb" :size="avatarSize" />
     <span
       class="first-char-box"
       v-else-if="firstChar"
@@ -71,7 +71,7 @@ const statusCircleColor = computed(() => {
     >
       {{ firstChar }}
     </span>
-    <el-avatar v-else :src="default_avatar" :size="avatarSize" />
+    <el-avatar class="avatar" v-else :src="default_avatar" :size="avatarSize" />
     <div
       v-if="props.userStatus != null"
       class="status-circle"
@@ -121,5 +121,13 @@ const statusCircleColor = computed(() => {
     bottom: 0;
     right: 0;
   }
+
+  .avatar {
+    border: 1px solid #fff;
+  }
+
+  .avatar ::v-deep img {
+    margin: 0;
+  }
 }
 </style>
diff --git a/src/views/layout/components/MyCard.vue b/src/views/layout/components/MyCard.vue
index 5455696..f6911ae 100644
--- a/src/views/layout/components/MyCard.vue
+++ b/src/views/layout/components/MyCard.vue
@@ -133,6 +133,11 @@ watch(
       height: 100px;
       position: absolute;
       top: 40px;
+      border: 2px solid #fff;
+    }
+
+    .avatar ::v-deep img {
+      margin: 0;
     }
 
     .gender {