diff --git a/docs/mobile/api/switch.en-US.md b/docs/mobile/api/switch.en-US.md
index 02f8b1514f..bb2c30da75 100644
--- a/docs/mobile/api/switch.en-US.md
+++ b/docs/mobile/api/switch.en-US.md
@@ -23,3 +23,7 @@ toc: false
 #### Switch Size
 
 {{ size }}
+
+#### Switch Shape
+
+{{ shape }}
diff --git a/docs/mobile/api/switch.md b/docs/mobile/api/switch.md
index 30f7f03d90..46fde38b7b 100644
--- a/docs/mobile/api/switch.md
+++ b/docs/mobile/api/switch.md
@@ -27,3 +27,7 @@ toc: false
 #### 开关尺寸
 
 {{ size }}
+
+#### 开关形状
+
+{{ shape }}
diff --git a/docs/web/api/switch.en-US.md b/docs/web/api/switch.en-US.md
index 91e704b4b2..ec17464df2 100644
--- a/docs/web/api/switch.en-US.md
+++ b/docs/web/api/switch.en-US.md
@@ -29,3 +29,9 @@ Switches for normal, loading and disabled are provided. Set the corresponding st
 Large, medium (default) and small switches are provided.
 
 {{ size }}
+
+### Switches of Different Shapes
+
+Three shapes are provided: circle, round and line.
+
+{{ shape }}
diff --git a/docs/web/api/switch.md b/docs/web/api/switch.md
index 57b9e773d2..1fc24092dd 100644
--- a/docs/web/api/switch.md
+++ b/docs/web/api/switch.md
@@ -29,3 +29,9 @@ spline: form
 提供 大、中（默认）、小 3种开关。
 
 {{ size }}
+
+### 不同形状的开关
+
+提供 圆形、圆角、线性 3 种形状。
+
+{{ shape }}
diff --git a/style/mobile/components/switch/_index.less b/style/mobile/components/switch/_index.less
index 1a4c36f786..af3a2dad10 100644
--- a/style/mobile/components/switch/_index.less
+++ b/style/mobile/components/switch/_index.less
@@ -38,6 +38,54 @@
     border-radius: @switch-small-radius;
   }
 
+  &--round {
+    border-radius: @switch-round-radius;
+
+    .@{prefix}-switch__dot {
+      border-radius: @switch-round-dot-radius;
+    }
+  }
+
+  &--line {
+    background-color: transparent;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: @switch-line-track-height;
+      border-radius: @switch-radius;
+      background-color: @switch-unchecked-color;
+      transform: translateY(-50%);
+      transition: all .3s ease;
+    }
+
+    &.@{prefix}-switch--checked::before {
+      background-color: @switch-checked-color;
+    }
+
+    &.@{prefix}-switch--disabled::before {
+      background-color: @switch-unchecked-disabled-color;
+    }
+
+    &.@{prefix}-switch--checked.@{prefix}-switch--disabled::before {
+      background-color: @switch-checked-disabled-color;
+    }
+
+    &.@{prefix}-switch--checked,
+    &.@{prefix}-switch--disabled,
+    &.@{prefix}-switch--checked.@{prefix}-switch--disabled {
+      background-color: transparent;
+    }
+
+    .@{prefix}-switch__label,
+    .@{prefix}-switch__dot {
+      z-index: 1;
+    }
+  }
+
   &__label {
     position: absolute;
     top: 0;
diff --git a/style/mobile/components/switch/_var.less b/style/mobile/components/switch/_var.less
index 3eb68091c4..b7da97e600 100644
--- a/style/mobile/components/switch/_var.less
+++ b/style/mobile/components/switch/_var.less
@@ -44,3 +44,7 @@
 @switch-icon-small-size: var(--td-switch-icon-small-size, 16px);
 
 @switch-loading-color: var(--td-switch-loading-color, @brand-color);
+
+@switch-round-radius: var(--td-switch-round-radius, 6px);
+@switch-round-dot-radius: var(--td-switch-round-dot-radius, 3px);
+@switch-line-track-height: var(--td-switch-line-track-height, 6px);
diff --git a/style/web/components/switch/_index.less b/style/web/components/switch/_index.less
index 94cf883d18..1cf695619b 100644
--- a/style/web/components/switch/_index.less
+++ b/style/web/components/switch/_index.less
@@ -271,3 +271,100 @@
     }
   }
 }
+
+.@{prefix}-switch {
+  &--shape-round {
+    border-radius: @switch-round-track-border-radius;
+
+    .@{prefix}-switch__handle,
+    .@{prefix}-switch__handle::before {
+      border-radius: @switch-round-handle-border-radius;
+    }
+  }
+
+  &--shape-line {
+    background-color: transparent;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 0;
+      right: 0;
+      height: @switch-line-track-height;
+      border-radius: @border-radius-round;
+      background-color: @switch-unchecked-bg-color;
+      transform: translateY(-50%);
+      transition: @switch-transition;
+    }
+
+    &:hover {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-unchecked-bg-color-hover;
+      }
+    }
+
+    .@{prefix}-switch__handle,
+    .@{prefix}-switch__content {
+      z-index: 1;
+    }
+
+    .@{prefix}-switch__handle {
+      left: 0;
+    }
+
+    &.@{prefix}-is-checked {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-checked-bg-color;
+      }
+
+      &:hover {
+        background-color: transparent;
+
+        &::before {
+          background-color: @switch-checked-bg-color-hover;
+        }
+      }
+
+      .@{prefix}-switch__handle {
+        left: 100%;
+      }
+    }
+
+    &.@{prefix}-is-loading {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-unchecked-bg-color-loading;
+      }
+
+      &.@{prefix}-is-checked {
+        background-color: transparent;
+
+        &::before {
+          background-color: @switch-checked-bg-color-loading;
+        }
+      }
+    }
+
+    &.@{prefix}-is-disabled {
+      background-color: transparent;
+
+      &::before {
+        background-color: @switch-unchecked-bg-color-disabled;
+      }
+
+      &.@{prefix}-is-checked {
+        background-color: transparent;
+
+        &::before {
+          background-color: @switch-checked-bg-color-disabled;
+        }
+      }
+    }
+  }
+}
diff --git a/style/web/components/switch/_var.less b/style/web/components/switch/_var.less
index 34a038da8b..b0f9c444c6 100644
--- a/style/web/components/switch/_var.less
+++ b/style/web/components/switch/_var.less
@@ -72,3 +72,8 @@
 @switch-content-transition:
   padding @anim-duration-base @anim-time-fn-easing,
   opacity @anim-duration-base linear;
+
+// 外观
+@switch-round-track-border-radius: @border-radius-default;
+@switch-round-handle-border-radius: @border-radius-small;
+@switch-line-track-height: 6px;