diff --git a/src/components/CodeEditor/src/CodeEditor.vue b/src/components/CodeEditor/src/CodeEditor.vue
index db9042b50..37ab7db26 100644
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -5,6 +5,7 @@
       @change="handleValueChange"
       :mode="mode"
       :readonly="readonly"
+      :bordered="bordered"
     />
   </div>
 </template>
@@ -26,6 +27,7 @@
     },
     readonly: { type: Boolean },
     autoFormat: { type: Boolean, default: true },
+    bordered: { type: Boolean, default: false },
   });
 
   const emit = defineEmits(['change', 'update:value', 'format-error']);
diff --git a/src/components/CodeEditor/src/codemirror/CodeMirror.vue b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
index af3017f58..f7c575019 100644
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="relative !h-full w-full overflow-hidden" ref="el"></div>
+  <div
+    class="relative !h-full w-full overflow-hidden"
+    :class="{ 'ant-input': props.bordered, 'css-dev-only-do-not-override-kqecok': props.bordered }"
+    ref="el"
+  ></div>
 </template>
 
 <script lang="ts" setup>
@@ -39,6 +43,7 @@
     },
     value: { type: String, default: '' },
     readonly: { type: Boolean, default: false },
+    bordered: { type: Boolean, default: false },
   });
 
   const emit = defineEmits(['change']);