diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
index 6aa4ae4a6d..4f773eebe5 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/BasicStyleSelector.vue
@@ -845,8 +845,9 @@ onMounted(() => {
             :effect="themes"
             is-custom
             :trigger-width="108"
-            color-format="hex"
+            color-format="rgb"
             :predefine="predefineColors"
+            show-alpha
             @change="changeBasicStyle('tableBorderColor')"
           />
         </el-form-item>
diff --git a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
index c53fd02f05..7436169b47 100644
--- a/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
+++ b/core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts
@@ -168,7 +168,7 @@ export function getCustomTheme(chart: Chart): S2Theme {
     const { basicStyle, tableHeader, tableCell } = customAttr
     // basic
     if (basicStyle) {
-      const tableBorderColor = hexColorToRGBA(basicStyle.tableBorderColor, basicStyle.alpha)
+      const tableBorderColor = basicStyle.tableBorderColor
       const tableScrollBarColor = basicStyle.tableScrollBarColor
       const tmpTheme: S2Theme = {
         splitLine: {