diff --git a/docs/.vitepress/vitepress/components/globals/icons.vue b/docs/.vitepress/vitepress/components/globals/icons.vue
index 21b207e20e..5b8bf20d50 100644
--- a/docs/.vitepress/vitepress/components/globals/icons.vue
+++ b/docs/.vitepress/vitepress/components/globals/icons.vue
@@ -70,8 +70,8 @@ const copySvgIcon = async (name, refs) => {
   overflow: hidden;
   list-style: none;
   padding: 0 !important;
-  border-top: 1px solid getCssVar('border-color');
-  border-left: 1px solid getCssVar('border-color');
+  border-top: 1px solid var(--el-border-color);
+  border-left: 1px solid var(--el-border-color);
   border-radius: 4px;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -81,8 +81,8 @@ const copySvgIcon = async (name, refs) => {
     color: var(--el-text-color-regular);
     height: 90px;
     font-size: 13px;
-    border-right: 1px solid getCssVar('border-color');
-    border-bottom: 1px solid getCssVar('border-color');
+    border-right: 1px solid var(--el-border-color);
+    border-bottom: 1px solid var(--el-border-color);
     transition: background-color var(--el-transition-duration);
     &:hover {
       background-color: var(--el-border-color-extra-light);
diff --git a/docs/examples/avatar/basic.vue b/docs/examples/avatar/basic.vue
index 96ebebc6f1..c584e7d172 100644
--- a/docs/examples/avatar/basic.vue
+++ b/docs/examples/avatar/basic.vue
@@ -54,12 +54,12 @@ const { circleUrl, squareUrl, sizeList } = toRefs(state)
   align-items: center;
 }
 .demo-basic .block:not(:last-child) {
-  border-right: 1px solid getCssVar('border-color');
+  border-right: 1px solid var(--el-border-color);
 }
 .demo-basic .block {
   flex: 1;
 }
 .demo-basic .el-col:not(:last-child) {
-  border-right: 1px solid getCssVar('border-color');
+  border-right: 1px solid var(--el-border-color);
 }
 </style>
diff --git a/docs/examples/avatar/types.vue b/docs/examples/avatar/types.vue
index 41293b88c6..caf0ab135a 100644
--- a/docs/examples/avatar/types.vue
+++ b/docs/examples/avatar/types.vue
@@ -28,6 +28,6 @@ import { UserFilled } from '@element-plus/icons-vue'
 }
 
 .demo-type > div:not(:last-child) {
-  border-right: 1px solid getCssVar('border-color');
+  border-right: 1px solid var(--el-border-color);
 }
 </style>
diff --git a/docs/examples/border/border.vue b/docs/examples/border/border.vue
index ee8e30e325..644e24fe6a 100644
--- a/docs/examples/border/border.vue
+++ b/docs/examples/border/border.vue
@@ -33,9 +33,9 @@
 .demo-border .line div {
   width: 100%;
   height: 0;
-  border-top: 1px solid getCssVar('border-color');
+  border-top: 1px solid var(--el-border-color);
 }
 .demo-border .line .dashed {
-  border-top: 2px dashed getCssVar('border-color');
+  border-top: 2px dashed var(--el-border-color);
 }
 </style>
diff --git a/docs/examples/border/radius.vue b/docs/examples/border/radius.vue
index daf7a63af0..59a299e130 100644
--- a/docs/examples/border/radius.vue
+++ b/docs/examples/border/radius.vue
@@ -66,7 +66,7 @@ const getValue = (type: string) => {
 .demo-radius .radius {
   height: 40px;
   width: 70%;
-  border: 1px solid getCssVar('border-color');
+  border: 1px solid var(--el-border-color);
   border-radius: 0;
   margin-top: 20px;
 }
diff --git a/docs/examples/date-picker/custom-prefix-icon.vue b/docs/examples/date-picker/custom-prefix-icon.vue
index d21c27b258..458357648f 100644
--- a/docs/examples/date-picker/custom-prefix-icon.vue
+++ b/docs/examples/date-picker/custom-prefix-icon.vue
@@ -33,7 +33,7 @@ const customPrefix = shallowRef({
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/date-formats.vue b/docs/examples/date-picker/date-formats.vue
index 87bab110de..ce7318588d 100644
--- a/docs/examples/date-picker/date-formats.vue
+++ b/docs/examples/date-picker/date-formats.vue
@@ -52,7 +52,7 @@ const value3 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/date-range.vue b/docs/examples/date-picker/date-range.vue
index b7a926db3c..71c6744bb2 100644
--- a/docs/examples/date-picker/date-range.vue
+++ b/docs/examples/date-picker/date-range.vue
@@ -71,7 +71,7 @@ const shortcuts = [
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/default-time.vue b/docs/examples/date-picker/default-time.vue
index ad1b59d494..10555466ce 100644
--- a/docs/examples/date-picker/default-time.vue
+++ b/docs/examples/date-picker/default-time.vue
@@ -32,7 +32,7 @@ const defaultTime = ref([
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/default-value.vue b/docs/examples/date-picker/default-value.vue
index 1d808426e1..b29d78ee98 100644
--- a/docs/examples/date-picker/default-value.vue
+++ b/docs/examples/date-picker/default-value.vue
@@ -38,7 +38,7 @@ const value2 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/enter-date.vue b/docs/examples/date-picker/enter-date.vue
index c39d840908..51e826a55c 100644
--- a/docs/examples/date-picker/enter-date.vue
+++ b/docs/examples/date-picker/enter-date.vue
@@ -60,7 +60,7 @@ const disabledDate = (time: Date) => {
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/month-range.vue b/docs/examples/date-picker/month-range.vue
index 3889989f00..c2c1e8f2da 100644
--- a/docs/examples/date-picker/month-range.vue
+++ b/docs/examples/date-picker/month-range.vue
@@ -65,7 +65,7 @@ const shortcuts = [
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
diff --git a/docs/examples/date-picker/other-measurements.vue b/docs/examples/date-picker/other-measurements.vue
index f62c377b4d..901c9a332b 100644
--- a/docs/examples/date-picker/other-measurements.vue
+++ b/docs/examples/date-picker/other-measurements.vue
@@ -58,7 +58,7 @@ const value4 = ref('')
 .demo-date-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-date-picker .block:last-child {
@@ -67,13 +67,13 @@ const value4 = ref('')
 
 .demo-date-picker .container {
   flex: 1;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
 }
 .demo-date-picker .container .block {
   border-right: none;
 }
 .demo-date-picker .container .block:last-child {
-  border-top: solid 1px getCssVar('border-color');
+  border-top: solid 1px var(--el-border-color);
 }
 .demo-date-picker .container:last-child {
   border-right: none;
diff --git a/docs/examples/datetime-picker/date-and-time-formats.vue b/docs/examples/datetime-picker/date-and-time-formats.vue
index f29f903698..25a23c19a8 100644
--- a/docs/examples/datetime-picker/date-and-time-formats.vue
+++ b/docs/examples/datetime-picker/date-and-time-formats.vue
@@ -52,7 +52,7 @@ const value3 = ref('')
 .demo-datetime-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-datetime-picker .block:last-child {
diff --git a/docs/examples/datetime-picker/date-and-time-range.vue b/docs/examples/datetime-picker/date-and-time-range.vue
index c448a9ee02..1efbd73926 100644
--- a/docs/examples/datetime-picker/date-and-time-range.vue
+++ b/docs/examples/datetime-picker/date-and-time-range.vue
@@ -65,7 +65,7 @@ const shortcuts = [
 .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .block:last-child {
diff --git a/docs/examples/datetime-picker/date-and-time.vue b/docs/examples/datetime-picker/date-and-time.vue
index 4be50a3cba..11492ee956 100644
--- a/docs/examples/datetime-picker/date-and-time.vue
+++ b/docs/examples/datetime-picker/date-and-time.vue
@@ -70,7 +70,7 @@ const shortcuts = [
 .demo-datetime-picker .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .demo-datetime-picker .block:last-child {
diff --git a/docs/examples/datetime-picker/default-time.vue b/docs/examples/datetime-picker/default-time.vue
index 58bedcec4e..51d4ace1e4 100644
--- a/docs/examples/datetime-picker/default-time.vue
+++ b/docs/examples/datetime-picker/default-time.vue
@@ -39,7 +39,7 @@ const defaultTime2 = [
 .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   flex: 1;
 }
 .block:last-child {
diff --git a/docs/examples/image/basic-usage.vue b/docs/examples/image/basic-usage.vue
index 22b09b896c..93c55e75f3 100644
--- a/docs/examples/image/basic-usage.vue
+++ b/docs/examples/image/basic-usage.vue
@@ -17,7 +17,7 @@ const url =
 .demo-image .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   display: inline-block;
   width: 20%;
   box-sizing: border-box;
diff --git a/docs/examples/image/load-failed.vue b/docs/examples/image/load-failed.vue
index 1b9a66203c..dfa6e7adfa 100644
--- a/docs/examples/image/load-failed.vue
+++ b/docs/examples/image/load-failed.vue
@@ -25,7 +25,7 @@ import { Picture as IconPicture } from '@element-plus/icons-vue'
 .demo-image__error .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   display: inline-block;
   width: 49%;
   box-sizing: border-box;
diff --git a/docs/examples/image/placeholder.vue b/docs/examples/image/placeholder.vue
index 78554c1e89..f15de8bd83 100644
--- a/docs/examples/image/placeholder.vue
+++ b/docs/examples/image/placeholder.vue
@@ -24,7 +24,7 @@ const src =
 .demo-image__placeholder .block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   display: inline-block;
   width: 49%;
   box-sizing: border-box;
diff --git a/docs/examples/rate/basic-usage.vue b/docs/examples/rate/basic-usage.vue
index b28bd51658..bb4e0c0d67 100644
--- a/docs/examples/rate/basic-usage.vue
+++ b/docs/examples/rate/basic-usage.vue
@@ -21,7 +21,7 @@ const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900']) // same as { 2: '#99A9BF',
 .demo-rate-block {
   padding: 30px 0;
   text-align: center;
-  border-right: solid 1px getCssVar('border-color');
+  border-right: solid 1px var(--el-border-color);
   display: inline-block;
   width: 49%;
   box-sizing: border-box;