diff --git a/core/core-frontend/src/custom-component/common/CommonAttr.vue b/core/core-frontend/src/custom-component/common/CommonAttr.vue
index 56aee1c0e7..116571ac31 100644
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@@ -11,6 +11,8 @@ import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapsho
 import CommonStyleSet from '@/custom-component/common/CommonStyleSet.vue'
 import CommonEvent from '@/custom-component/common/CommonEvent.vue'
 import TabCarouselSetting from '@/custom-component/common/TabCarouselSetting.vue'
+import CommonBorderSetting from '@/custom-component/common/CommonBorderSetting.vue'
+import CollapseSwitchItem from '../../components/collapse-switch-item/src/CollapseSwitchItem.vue'
 const snapshotStore = snapshotStoreWithOut()
 
 const { t } = useI18n()
@@ -94,6 +96,10 @@ const colorPickerWidth = computed(() => {
   }
 })
 
+const borderSettingShow = computed(() => {
+  return !!element.value.style['borderActive']
+})
+
 // 暂时关闭
 const eventsShow = computed(() => {
   return (
@@ -178,6 +184,20 @@ const stopEvent = e => {
       >
         <common-event :themes="themes" :events-info="element.events"></common-event>
       </el-collapse-item>
+      <collapse-switch-item
+        v-if="element && borderSettingShow"
+        v-model="element.value.style.borderActive"
+        :themes="themes"
+        title="边框"
+        name="borderSetting"
+        class="common-style-area"
+      >
+        <common-border-setting
+          :element="element"
+          :themes="themes"
+          @onStyleAttrChange="onStyleAttrChange"
+        ></common-border-setting>
+      </collapse-switch-item>
       <TabCarouselSetting
         v-if="carouselShow"
         :element="element"
diff --git a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
new file mode 100644
index 0000000000..ab8508ee2c
--- /dev/null
+++ b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { computed, reactive, ref, toRefs, watch } from 'vue'
+import { ElFormItem, ElInputNumber } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { storeToRefs } from 'pinia'
+import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
+const dvMainStore = dvMainStoreWithOut()
+
+const snapshotStore = snapshotStoreWithOut()
+const { canvasStyleData } = storeToRefs(dvMainStore)
+
+const props = withDefaults(
+  defineProps<{
+    themes?: EditorTheme
+    element: any
+  }>(),
+  {
+    themes: 'dark'
+  }
+)
+const emits = defineEmits(['onStyleAttrChange'])
+const { themes, element } = toRefs(props)
+const state = reactive({
+  fontSize: [],
+  isSetting: false,
+  predefineColors: COLOR_PANEL
+})
+const styleMounted = ref({
+  borderWidth: 0,
+  borderRadius: 5
+})
+
+const borderStyleList = [
+  { name: '实线', value: 'solid' },
+  { name: '虚线', value: 'dashed' },
+  { name: '点线', value: 'dotted' }
+]
+
+const styleInit = () => {
+  if (element.value) {
+    Object.keys(styleMounted.value).forEach(key => {
+      styleMounted.value[key] = Math.round(
+        (element.value.style[key] * 100) / canvasStyleData.value.scale
+      )
+    })
+  }
+}
+
+const styleForm = computed<any>(() => element.value.style)
+
+const changeStyle = params => {
+  snapshotStore.recordSnapshotCache()
+  emits('onStyleAttrChange', params)
+}
+
+const changeStylePre = key => {
+  changeStyle({ key: key, value: element.value.style[key] })
+}
+
+const sizeChange = key => {
+  element.value.style[key] = Math.round(
+    (styleMounted.value[key] * canvasStyleData.value.scale) / 100
+  )
+  changeStyle({ key: key, value: element.value.style[key] })
+}
+
+watch(
+  () => element.value,
+  () => {
+    styleInit()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <el-row class="custom-row">
+    <el-form label-position="top">
+      <el-form-item label="颜色" class="form-item" :class="'form-item-' + themes">
+        <el-color-picker
+          title="颜色"
+          v-model="styleForm.borderColor"
+          class="color-picker-style"
+          :triggerWidth="50"
+          is-custom
+          :predefine="state.predefineColors"
+          @change="changeStylePre('borderColor')"
+        >
+        </el-color-picker>
+      </el-form-item>
+      <el-form-item label="圆角" class="form-item" :class="'form-item-' + themes">
+        <el-input-number
+          title="圆角"
+          v-model="styleForm.borderRadio"
+          class="color-picker-style"
+          @change="sizeChange('borderWidth')"
+        >
+        </el-input-number>
+      </el-form-item>
+      <el-form-item label="样式" class="form-item" :class="'form-item-' + themes">
+        <el-select
+          :effect="themes"
+          v-model="styleForm.borderStyle"
+          size="small"
+          @change="changeStylePre('borderStyle')"
+        >
+          <el-option
+            class="custom-style-option"
+            v-for="option in borderStyleList"
+            :key="option.value"
+            :label="option.name"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="线宽" class="form-item" :class="'form-item-' + themes">
+        <el-input-number
+          title="线宽"
+          v-model="styleForm.borderWidth"
+          class="color-picker-style"
+          @change="sizeChange('borderWidth')"
+        >
+        </el-input-number>
+      </el-form-item>
+    </el-form>
+  </el-row>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index f18cde8084..9868416c47 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -5,7 +5,12 @@ import { getViewConfig } from '@/views/chart/components/editor/util/chart'
 
 export const commonStyle = {
   rotate: 0,
-  opacity: 1
+  opacity: 1,
+  borderActive: false,
+  borderWidth: 1,
+  borderRadius: 5,
+  borderStyle: 'solid',
+  borderColor: '#cccccc'
 }
 
 // 轮询设置
@@ -466,11 +471,8 @@ const list = [
     style: {
       width: 200,
       height: 200,
-      borderWidth: 1,
-      borderRadius: 5,
-      borderStyle: 'solid',
-      borderColor: '#cccccc',
-      backgroundColor: 'rgba(236,231,231,0.1)'
+      backgroundColor: 'rgba(236,231,231,0.1)',
+      borderActive: true
     }
   },
   {