diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx
index 0f699775a5..f398cac4d8 100644
--- a/.dumi/pages/index/components/Theme/index.tsx
+++ b/.dumi/pages/index/components/Theme/index.tsx
@@ -500,7 +500,7 @@ const Theme: React.FC = () => {
                 className={classNames(styles.transBg)}
                 selectedKeys={['Themes']}
                 openKeys={['Design']}
-                style={{ height: '100%', borderRight: 0 }}
+                style={{ height: '100%', borderInlineEnd: 0 }}
                 items={sideMenuItems}
                 expandIcon={false}
               />
diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx
index 079b6fa7a7..37e626fe6a 100644
--- a/.dumi/theme/builtins/TokenCompare/index.tsx
+++ b/.dumi/theme/builtins/TokenCompare/index.tsx
@@ -31,7 +31,7 @@ const useStyle = createStyles(({ token, css }) => {
       align-items: center;
       justify-content: center;
       color: rgba(0, 0, 0, 0.88);
-      border-right: 1px solid rgba(0, 0, 0, 0.1);
+      border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
     `,
 
     colDark: css`
diff --git a/.dumi/theme/common/SemanticPreview.tsx b/.dumi/theme/common/SemanticPreview.tsx
index 4fd766f23e..06b32009a0 100644
--- a/.dumi/theme/common/SemanticPreview.tsx
+++ b/.dumi/theme/common/SemanticPreview.tsx
@@ -18,7 +18,7 @@ const useStyle = createStyles(({ token }) => ({
     position: relative;
   `,
   colWrap: css`
-    border-right: 1px solid ${token.colorBorderSecondary};
+    border-inline-end: 1px solid ${token.colorBorderSecondary};
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/.dumi/theme/common/styles/NProgress.tsx b/.dumi/theme/common/styles/NProgress.tsx
index 04ebc61524..e1caf0bd8e 100644
--- a/.dumi/theme/common/styles/NProgress.tsx
+++ b/.dumi/theme/common/styles/NProgress.tsx
@@ -20,7 +20,7 @@ export default () => {
 
           .spinner-icon {
             border-top-color: ${token.colorPrimary};
-            border-left-color: ${token.colorPrimary};
+            border-inline-start-color: ${token.colorPrimary};
           }
         }
       `}
diff --git a/.dumi/theme/common/styles/Responsive.tsx b/.dumi/theme/common/styles/Responsive.tsx
index 7b20571d45..ae1a412b76 100644
--- a/.dumi/theme/common/styles/Responsive.tsx
+++ b/.dumi/theme/common/styles/Responsive.tsx
@@ -66,7 +66,7 @@ export default () => {
             float: none;
             width: auto;
             padding-bottom: 30px;
-            border-right: 0;
+            border-inline-end: 0;
           }
 
           .ant-row-rtl {
diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 3956f5b27e..f1efb23720 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/drawer/demo/basic-right.tsx extend context correctly 1`] = `
 Array [
@@ -147,7 +147,7 @@ Array [
     >
       <div
         aria-modal="true"
-        class="ant-drawer-content acss-1g5mw59"
+        class="ant-drawer-content acss-10412ne"
         role="dialog"
         style="box-shadow: -10px 0 10px #666;"
       >
@@ -239,7 +239,7 @@ Array [
     >
       <div
         aria-modal="true"
-        class="ant-drawer-content acss-1g5mw59"
+        class="ant-drawer-content acss-10412ne"
         role="dialog"
         style="box-shadow: -10px 0 10px #666;"
       >
diff --git a/components/drawer/demo/classNames.tsx b/components/drawer/demo/classNames.tsx
index 5986a89e55..2a972ea787 100644
--- a/components/drawer/demo/classNames.tsx
+++ b/components/drawer/demo/classNames.tsx
@@ -17,7 +17,7 @@ const useStyle = createStyles(({ token }) => ({
     color: token.colorPrimary,
   },
   'my-drawer-content': {
-    borderLeft: '2px dotted #333',
+    borderInlineStart: '2px dotted #333',
   },
 }));
 
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index 0f70321064..8fe8303afb 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -9702,7 +9702,7 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
       class="ant-input ant-input-disabled ant-input-outlined site-input-split"
       disabled=""
       placeholder="~"
-      style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
+      style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
       type="text"
       value=""
     />
diff --git a/components/input/__tests__/__snapshots__/demo.test.tsx.snap b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
index 779b44b9c2..72ebc8425f 100644
--- a/components/input/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/input/demo/addon.tsx correctly 1`] = `
 <div
@@ -3381,7 +3381,7 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
       class="ant-input ant-input-disabled ant-input-outlined site-input-split"
       disabled=""
       placeholder="~"
-      style="width:30px;border-left:0;border-right:0;pointer-events:none"
+      style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
       type="text"
       value=""
     />
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index e982af8e94..072992e739 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -12,20 +12,20 @@
 }
 
 .site-input-group-wrapper .site-input-right {
-  border-left-width: 0;
+  border-inline-start-width: 0;
 }
 
 .site-input-group-wrapper .site-input-right:hover,
 .site-input-group-wrapper .site-input-right:focus {
-  border-left-width: 1px;
+  border-inline-start-width: 1px;
 }
 
 .site-input-group-wrapper .ant-input-rtl.site-input-right {
-  border-right-width: 0;
+  border-inline-end-width: 0;
 }
 
 .site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
 .site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
-  border-right-width: 1px;
+  border-inline-end-width: 1px;
 }
 ```
diff --git a/components/input/demo/group.tsx b/components/input/demo/group.tsx
index 1bf28b0090..befe82b7f2 100644
--- a/components/input/demo/group.tsx
+++ b/components/input/demo/group.tsx
@@ -136,8 +136,8 @@ const App: React.FC = () => (
         className="site-input-split"
         style={{
           width: 30,
-          borderLeft: 0,
-          borderRight: 0,
+          borderInlineStart: 0,
+          borderInlineEnd: 0,
           pointerEvents: 'none',
         }}
         placeholder="~"
diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7ef6a6c489..1e6007720a 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/layout/demo/basic.tsx extend context correctly 1`] = `
 <div
@@ -182,7 +182,7 @@ exports[`renders components/layout/demo/component-token.tsx extend context corre
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="border-right: 0;"
+          style="border-inline-end: 0;"
           tabindex="0"
         >
           <li
@@ -4605,7 +4605,7 @@ exports[`renders components/layout/demo/top-side-2.tsx extend context correctly
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="height: 100%; border-right: 0;"
+          style="height: 100%; border-inline-end: 0;"
           tabindex="0"
         >
           <li
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 3117e332eb..c8b6e795ba 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/layout/demo/basic.tsx correctly 1`] = `
 <div
@@ -180,7 +180,7 @@ exports[`renders components/layout/demo/component-token.tsx correctly 1`] = `
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="border-right:0"
+          style="border-inline-end:0"
           tabindex="0"
         >
           <li
@@ -2552,7 +2552,7 @@ exports[`renders components/layout/demo/top-side-2.tsx correctly 1`] = `
           class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
           data-menu-list="true"
           role="menu"
-          style="height:100%;border-right:0"
+          style="height:100%;border-inline-end:0"
           tabindex="0"
         >
           <li
diff --git a/components/layout/demo/component-token.tsx b/components/layout/demo/component-token.tsx
index aeeab643dd..7b3b6f6527 100644
--- a/components/layout/demo/component-token.tsx
+++ b/components/layout/demo/component-token.tsx
@@ -66,7 +66,7 @@ const App: React.FC = () => {
               mode="inline"
               defaultSelectedKeys={['1']}
               defaultOpenKeys={['sub1']}
-              style={{ borderRight: 0 }}
+              style={{ borderInlineEnd: 0 }}
               items={items2}
             />
           </Sider>
diff --git a/components/layout/demo/top-side-2.tsx b/components/layout/demo/top-side-2.tsx
index 4758a2c480..2665fcfacd 100644
--- a/components/layout/demo/top-side-2.tsx
+++ b/components/layout/demo/top-side-2.tsx
@@ -52,7 +52,7 @@ const App: React.FC = () => {
             mode="inline"
             defaultSelectedKeys={['1']}
             defaultOpenKeys={['sub1']}
-            style={{ height: '100%', borderRight: 0 }}
+            style={{ height: '100%', borderInlineEnd: 0 }}
             items={items2}
           />
         </Sider>
diff --git a/components/modal/demo/classNames.tsx b/components/modal/demo/classNames.tsx
index 67eb1eb5ee..1a66c40a14 100644
--- a/components/modal/demo/classNames.tsx
+++ b/components/modal/demo/classNames.tsx
@@ -43,7 +43,7 @@ const App: React.FC = () => {
 
   const modalStyles = {
     header: {
-      borderLeft: `5px solid ${token.colorPrimary}`,
+      borderInlineStart: `5px solid ${token.colorPrimary}`,
       borderRadius: 0,
       paddingInlineStart: 5,
     },
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 9dcbd935cc..95a8402042 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/space/demo/align.tsx extend context correctly 1`] = `
 <div
@@ -4817,7 +4817,7 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
         class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
         disabled=""
         placeholder="~"
-        style="width: 30px; border-left: 0; border-right: 0; pointer-events: none;"
+        style="width: 30px; border-inline-start: 0; border-inline-end: 0; pointer-events: none;"
         type="text"
         value=""
       />
diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
index dc4ba47e6d..1d7c3d07c8 100644
--- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/space/demo/align.tsx correctly 1`] = `
 <div
@@ -1409,7 +1409,7 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
         class="ant-input ant-input-disabled ant-input-outlined site-input-split ant-input-compact-item"
         disabled=""
         placeholder="~"
-        style="width:30px;border-left:0;border-right:0;pointer-events:none"
+        style="width:30px;border-inline-start:0;border-inline-end:0;pointer-events:none"
         type="text"
         value=""
       />
diff --git a/components/space/demo/compact.tsx b/components/space/demo/compact.tsx
index 0673e886b6..fe90a48efb 100644
--- a/components/space/demo/compact.tsx
+++ b/components/space/demo/compact.tsx
@@ -101,8 +101,8 @@ const App: React.FC = () => (
         className="site-input-split"
         style={{
           width: 30,
-          borderLeft: 0,
-          borderRight: 0,
+          borderInlineStart: 0,
+          borderInlineEnd: 0,
           pointerEvents: 'none',
         }}
         placeholder="~"
diff --git a/components/table/demo/drag-column-sorting.tsx b/components/table/demo/drag-column-sorting.tsx
index f04051b019..18baba8f3b 100644
--- a/components/table/demo/drag-column-sorting.tsx
+++ b/components/table/demo/drag-column-sorting.tsx
@@ -44,18 +44,13 @@ interface DragIndexState {
 const DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });
 
 const dragActiveStyle = (dragState: DragIndexState, id: string) => {
-  const { active, over, direction } = dragState;
+  const { active, over } = dragState;
   // drag active style
   let style: React.CSSProperties = {};
   if (active && active === id) {
     style = { backgroundColor: 'gray', opacity: 0.5 };
-  }
-  // dragover dashed style
-  else if (over && id === over && active !== over) {
-    style =
-      direction === 'right'
-        ? { borderRight: '1px dashed gray' }
-        : { borderLeft: '1px dashed gray' };
+  } else if (over && id === over && active !== over) {
+    style = { borderInlineStart: '1px dashed gray' };
   }
   return style;
 };
diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8594c3719b..80c61c5a78 100644
--- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/watermark/demo/basic.tsx extend context correctly 1`] = `
 <div
@@ -54,7 +54,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
   </div>
   <form
     class="ant-form ant-form-vertical"
-    style="width: 280px; flex-shrink: 0; border-left: 1px solid #eee; padding-inline-start: 16px;"
+    style="width: 280px; flex-shrink: 0; border-inline-start: 1px solid #eee; padding-inline-start: 16px;"
   >
     <div
       class="ant-form-item"
diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
index 521db225e7..8d05bf7879 100644
--- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`renders components/watermark/demo/basic.tsx correctly 1`] = `
 <div
@@ -46,7 +46,7 @@ exports[`renders components/watermark/demo/custom.tsx correctly 1`] = `
   </div>
   <form
     class="ant-form ant-form-vertical"
-    style="width:280px;flex-shrink:0;border-left:1px solid #eee;padding-inline-start:16px"
+    style="width:280px;flex-shrink:0;border-inline-start:1px solid #eee;padding-inline-start:16px"
   >
     <div
       class="ant-form-item"
diff --git a/components/watermark/demo/custom.tsx b/components/watermark/demo/custom.tsx
index 5f1df0bd87..1d46952a9d 100644
--- a/components/watermark/demo/custom.tsx
+++ b/components/watermark/demo/custom.tsx
@@ -73,7 +73,12 @@ const App: React.FC = () => {
         />
       </Watermark>
       <Form
-        style={{ width: 280, flexShrink: 0, borderLeft: '1px solid #eee', paddingInlineStart: 16 }}
+        style={{
+          width: 280,
+          flexShrink: 0,
+          borderInlineStart: '1px solid #eee',
+          paddingInlineStart: 16,
+        }}
         form={form}
         layout="vertical"
         initialValues={config}