diff --git a/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json b/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json
new file mode 100644
index 0000000000000..0fac651678d7b
--- /dev/null
+++ b/change/@fluentui-web-components-31c14b28-dbe7-4ab5-a327-1192cfefa66c.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "content-visibility",
+  "packageName": "@fluentui/web-components",
+  "email": "qinshuoli@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/card/card.styles.ts b/packages/web-components/src/card/card.styles.ts
index f59791aca6697..6e5749a6c361b 100644
--- a/packages/web-components/src/card/card.styles.ts
+++ b/packages/web-components/src/card/card.styles.ts
@@ -22,6 +22,10 @@ export const CardStyles = css`
   :host(:focus-within) {
     --elevation: 8;
   }
+
+  :host {
+    content-visibility: auto;
+  }
 `.withBehaviors(
   neutralFillCardRestBehavior,
   forcedColorsStylesheetBehavior(