diff --git a/src/grid/grid-item.tsx b/src/grid/grid-item.tsx
index f21c721e3..78dfb491d 100644
--- a/src/grid/grid-item.tsx
+++ b/src/grid/grid-item.tsx
@@ -48,7 +48,7 @@ export default defineComponent({
     const gridItemClasses = computed(() => [
       `${name}`,
       `${name}--${props.layout}`,
-      { [`${name}--bordered`]: border, [`${name}--surround`]: border && gutter },
+      { [`${name}--bordered`]: border.value, [`${name}--surround`]: border.value && gutter.value },
     ]);
 
     return () => {
diff --git a/src/grid/grid.tsx b/src/grid/grid.tsx
index 6be3994c6..348a999c6 100644
--- a/src/grid/grid.tsx
+++ b/src/grid/grid.tsx
@@ -34,7 +34,7 @@ export default defineComponent({
       {
         [`${name}--card`]: props.theme === 'card',
         [`${name}--auto-size`]: props.column === 0,
-        [`${name}--bordered`]: border && !gutter,
+        [`${name}--bordered`]: props.border && !props.gutter,
       },
     ]);
     return () => (