diff --git a/src/components/card/card.css b/src/components/card/card.css
index 6943729ad..8be8a0d9a 100644
--- a/src/components/card/card.css
+++ b/src/components/card/card.css
@@ -5,6 +5,7 @@
 
   --spacing: var(--wa-space);
   --border-width: var(--wa-panel-border-width);
+  --border-color: var(--wa-color-surface-border);
   --border-radius: var(--wa-panel-border-radius);
 
   --inner-border-radius: calc(var(--border-radius) - var(--border-width));
@@ -12,7 +13,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--wa-color-surface-default);
-  border-color: var(--wa-color-surface-border);
+  border-color: var(--border-color);
   border-radius: var(--border-radius);
   border-style: var(--wa-panel-border-style);
   box-shadow: var(--wa-shadow-s);
@@ -20,12 +21,20 @@
   color: var(--wa-color-text-normal);
 }
 
+/* Take care of top and bottom radii */
 .image,
-:host(:not([with-image])) .header {
+:host(:not([with-image])) .header,
+:host(:not([with-image], [with-header])) .body {
   border-start-start-radius: var(--inner-border-radius);
   border-start-end-radius: var(--inner-border-radius);
 }
 
+:host(:not([with-footer])) .body,
+.footer {
+  border-end-start-radius: var(--inner-border-radius);
+  border-end-end-radius: var(--inner-border-radius);
+}
+
 .image {
   display: flex;
 
@@ -39,7 +48,9 @@
 
 .header {
   display: block;
-  border-bottom: inherit;
+  border-block-end-style: inherit;
+  border-block-end-color: var(--border-color);
+  border-block-end-width: var(--border-width);
   padding: calc(var(--spacing) / 2) var(--spacing);
 }
 
@@ -50,9 +61,9 @@
 
 .footer {
   display: block;
-  border-top: inherit;
-  border-end-start-radius: var(--inner-border-radius);
-  border-end-end-radius: var(--inner-border-radius);
+  border-block-start-style: inherit;
+  border-block-start-color: var(--border-color);
+  border-block-start-width: var(--border-width);
   padding: var(--spacing);
 }
 
diff --git a/src/components/card/card.ts b/src/components/card/card.ts
index 523e8517a..2c9317d9a 100644
--- a/src/components/card/card.ts
+++ b/src/components/card/card.ts
@@ -21,9 +21,10 @@ import styles from './card.css';
  * @csspart body - The container that wraps the card's main content.
  * @csspart footer - The container that wraps the card's footer.
  *
- * @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
- * @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
- * @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
+ * @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
+ * @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
+ * @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
+ * @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
  */
 @customElement('wa-card')
 export default class WaCard extends WebAwesomeElement {