diff --git a/src/area/test/__snapshots__/demo.spec.js.snap b/src/area/test/__snapshots__/demo.spec.js.snap
index c5953b61e..76e653093 100644
--- a/src/area/test/__snapshots__/demo.spec.js.snap
+++ b/src/area/test/__snapshots__/demo.spec.js.snap
@@ -75,7 +75,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -158,7 +158,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -217,7 +217,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap
index 7d05b31f5..4811b36d7 100644
--- a/src/area/test/__snapshots__/index.spec.js.snap
+++ b/src/area/test/__snapshots__/index.spec.js.snap
@@ -27,7 +27,7 @@ exports[`change option 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -60,7 +60,7 @@ exports[`change option 2`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -93,7 +93,7 @@ exports[`change option 3`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -120,7 +120,7 @@ exports[`columns-num prop 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -152,7 +152,7 @@ exports[`reset method 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -185,7 +185,7 @@ exports[`reset method 2`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -218,7 +218,7 @@ exports[`watch areaList & code 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -251,7 +251,7 @@ exports[`watch areaList & code 2`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -284,7 +284,7 @@ exports[`watch areaList & code 3`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
diff --git a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
index f693fe82d..3a382eee2 100644
--- a/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap
@@ -56,7 +56,7 @@ exports[`filter prop 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -118,7 +118,7 @@ exports[`formatter prop 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
diff --git a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
index 997df0c9d..9ac1f5b82 100644
--- a/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap
@@ -21,7 +21,7 @@ exports[`time type 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
diff --git a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
index f6511f935..a2b8de2e6 100644
--- a/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/demo.spec.js.snap
@@ -160,7 +160,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -241,7 +241,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -287,7 +287,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -380,7 +380,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -438,7 +438,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
diff --git a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
index f1bc1cb50..d0514baec 100644
--- a/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
+++ b/src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap
@@ -28,7 +28,7 @@ exports[`filter prop 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -55,7 +55,7 @@ exports[`format initial value 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -89,7 +89,7 @@ exports[`formatter prop 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -118,7 +118,7 @@ exports[`max-hour & max-minute 1`] = `
       </ul>
     </div>
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
diff --git a/src/picker/index.js b/src/picker/index.js
index 6f25c7a3d..fe0c6e15c 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
 import { preventDefault } from '../utils/dom/event';
 import { deepClone } from '../utils/deep-clone';
 import { pickerProps } from './shared';
-import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
+import { BLUE, BORDER_TOP_BOTTOM, BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 
@@ -198,7 +198,7 @@ export default createComponent({
             />
           ))}
           <div class={bem('mask')} style={maskStyle} />
-          <div class={[BORDER_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
+          <div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
         </div>
         {this.toolbarPosition === 'bottom' ? Toolbar : h()}
       </div>
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index 78184b9e2..7a7072fd2 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -59,7 +59,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -85,7 +85,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -110,7 +110,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
@@ -135,7 +135,7 @@ exports[`renders demo correctly 1`] = `
           </ul>
         </div>
         <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-        <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+        <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
       </div>
       <!---->
     </div>
diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap
index c88983ee1..88cf9c062 100644
--- a/src/picker/test/__snapshots__/index.spec.js.snap
+++ b/src/picker/test/__snapshots__/index.spec.js.snap
@@ -36,7 +36,7 @@ exports[`render title slot 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <!---->
 </div>
@@ -48,7 +48,7 @@ exports[`toolbar-position prop 1`] = `
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
-    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+    <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
   <div class="van-hairline--top-bottom van-picker__toolbar">
     <div role="button" tabindex="0" class="van-picker__cancel">取消</div>
diff --git a/src/style/hairline.less b/src/style/hairline.less
index bba826994..512193b7e 100644
--- a/src/style/hairline.less
+++ b/src/style/hairline.less
@@ -1,14 +1,21 @@
 @import './mixins/hairline';
 
 [class*='van-hairline'] {
-  position: relative;
-
   &::after {
     .hairline();
   }
 }
 
 .van-hairline {
+  &--top,
+  &--left,
+  &--right,
+  &--bottom,
+  &--surround,
+  &--top-bottom {
+    position: relative;
+  }
+
   &--top::after {
     border-top-width: 1px;
   }
@@ -25,8 +32,11 @@
     border-bottom-width: 1px;
   }
 
-  &--top-bottom::after {
-    border-width: 1px 0;
+  &,
+  &-unset {
+    &--top-bottom::after {
+      border-width: 1px 0;
+    }
   }
 
   &--surround::after {
diff --git a/src/utils/constant.ts b/src/utils/constant.ts
index f51b1e472..f70afc57f 100644
--- a/src/utils/constant.ts
+++ b/src/utils/constant.ts
@@ -14,3 +14,4 @@ export const BORDER_RIGHT = `${BORDER}--right`;
 export const BORDER_BOTTOM = `${BORDER}--bottom`;
 export const BORDER_SURROUND = `${BORDER}--surround`;
 export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
+export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;