diff --git a/packages/popover/src/popover.less b/packages/popover/src/popover.less
index ece14d50f..921b5c915 100644
--- a/packages/popover/src/popover.less
+++ b/packages/popover/src/popover.less
@@ -30,9 +30,25 @@
       color: #26323d;
       background-color: #fff;
       box-shadow: 0 0 6px 0 #dcdee5;
-
+      border: 1px solid #dcdee5;
       .@{bk-prefix}-pop2-arrow {
         background-color: #fff;
+        &[data-arrow='top']{
+          border-right: 1px solid #dcdee5;
+          border-bottom: 1px solid #dcdee5;
+        }
+        &[data-arrow='right']{
+          border-left: 1px solid #dcdee5;
+          border-bottom: 1px solid #dcdee5;
+        }
+        &[data-arrow='left']{
+          border-right: 1px solid #dcdee5;
+          border-top: 1px solid #dcdee5;
+        }
+        &[data-arrow='bottom']{
+          border-left: 1px solid #dcdee5;
+          border-top: 1px solid #dcdee5;
+        }
       }
     }
   }
diff --git a/packages/styles/src/mixins/popper.less b/packages/styles/src/mixins/popper.less
index 3cdb2ab7e..6ad788c7f 100644
--- a/packages/styles/src/mixins/popper.less
+++ b/packages/styles/src/mixins/popper.less
@@ -7,13 +7,46 @@
   color: #fff;
   background: #333;
   border-radius: 4px;
-
+  border: 1px solid #dcdee5;
   &.light {
     color: #63656e;
     background: #fff;
     box-shadow: rgb(220, 222, 229) 0 0 6px 0;
+    &[data-popper-placement^='top'] {
+        .@{bk-prefix}-popper-arrow{
+          &::before{
+            border-right: 1px solid #dcdee5;
+            border-bottom: 1px solid #dcdee5;
+        }
+      }
+    }
+    &[data-popper-placement^='right'] {
+        .@{bk-prefix}-popper-arrow{
+          &::before{
+            border-left: 1px solid #dcdee5;
+            border-bottom: 1px solid #dcdee5;
+        }
+      }
+    }  
+    &[data-popper-placement^='left'] {
+        .@{bk-prefix}-popper-arrow{
+          &::before{
+            border-right: 1px solid #dcdee5;
+            border-top: 1px solid #dcdee5;
+        }
+      }
+    } 
+    &[data-popper-placement^='bottom'] {
+        .@{bk-prefix}-popper-arrow{
+          &::before{
+            border-left: 1px solid #dcdee5;
+            border-top: 1px solid #dcdee5;
+        }
+      }
+    } 
   }
 
+  
   .@{bk-prefix}-popper-arrow,
   .@{bk-prefix}-popper-arrow::before {
     position: absolute;
@@ -35,6 +68,8 @@
   &[data-show] {
     display: block;
   }
+
+  
 }
 
 .@{bk-prefix}-popper[data-popper-placement^='top']>.@{bk-prefix}-popper-arrow {