diff --git a/labs/card/internal/_outlined-card.scss b/labs/card/internal/_outlined-card.scss
index ce03b36b75..fcef13130d 100644
--- a/labs/card/internal/_outlined-card.scss
+++ b/labs/card/internal/_outlined-card.scss
@@ -33,7 +33,8 @@
     }
   }
 
-  .container {
-    border: var(--_outline-width) solid var(--_outline-color);
+  .outline {
+    border-color: var(--_outline-color);
+    border-width: var(--_outline-width);
   }
 }
diff --git a/labs/card/internal/_shared.scss b/labs/card/internal/_shared.scss
index 5d73111a54..0aa5f35374 100644
--- a/labs/card/internal/_shared.scss
+++ b/labs/card/internal/_shared.scss
@@ -18,18 +18,31 @@
     z-index: 0;
   }
 
-  // Separate element will be needed for disabled opacities (b/307361748)
-  .container {
-    background: var(--_container-color);
+  md-elevation,
+  .background,
+  .outline {
     border-radius: inherit;
     inset: 0;
     position: absolute;
+  }
+
+  // Separate element will be needed for disabled opacities (b/307361748)
+  .background {
+    background: var(--_container-color);
     // Place behind content.
     z-index: -1;
   }
 
+  // Separate element needed to overlay on top of content as opposed to
+  // background, which is behind content. All cards have an outline for HCM.
+  .outline {
+    // A default transparent border that is visible in HCM
+    border: 1px solid transparent;
+    // Outline should be placed on top of content, such as images.
+    z-index: 1;
+  }
+
   md-elevation {
-    border-radius: inherit;
     // Place behind content.
     z-index: -1;
 
diff --git a/labs/card/internal/card.ts b/labs/card/internal/card.ts
index 03f74e0218..3df759af0d 100644
--- a/labs/card/internal/card.ts
+++ b/labs/card/internal/card.ts
@@ -15,8 +15,9 @@ export class Card extends LitElement {
   protected override render() {
     return html`
       <md-elevation part="elevation"></md-elevation>
-      <div class="container"></div>
+      <div class="background"></div>
       <slot></slot>
+      <div class="outline"></div>
     `;
   }
 }