diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md
index 87a99abc2..bb50a96cd 100644
--- a/docs/docs/components/card.md
+++ b/docs/docs/components/card.md
@@ -186,11 +186,21 @@ Use the `appearance` attribute to change the card's visual appearance.
 ```html {.example}
 <div class="wa-grid">
 <wa-card>
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
   <div slot="header">Outlined (default)</div>
   Card content.
 </wa-card>
 {% for appearance in ['outlined filled', 'outlined accent', 'plain', 'filled', 'accent'] -%}
 <wa-card appearance="{{ appearance }}">
+  <img
+    slot="image"
+    src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
+    alt="A kitten sits patiently between a terracotta pot and decorative grasses."
+  />
   <div slot="header">{{ appearance | capitalize }}</div>
   Card content.
 </wa-card>
diff --git a/src/components/card/card.css b/src/components/card/card.css
index 8b2f193f9..30df20f03 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -60,6 +60,15 @@
   }
 }
 
+/* Round all corners for plain appearance */
+:host([appearance='plain']) .image {
+  border-radius: var(--inner-border-radius);
+
+  &::slotted(img) {
+    border-radius: inherit !important;
+  }
+}
+
 .header {
   display: block;
   border-block-end-style: inherit;