diff --git a/scss/content/_tables.scss b/scss/content/_tables.scss
index 781d1f2c797e..b162a0150966 100644
--- a/scss/content/_tables.scss
+++ b/scss/content/_tables.scss
@@ -2,6 +2,7 @@
 @use "../config" as *;
 @use "../functions" as *;
 @use "../layout/breakpoints" as *;
+@use "../mixins/border-radius" as *;
 @use "../mixins/tokens" as *;
 
 // stylelint-disable custom-property-no-missing-var-function
@@ -176,6 +177,34 @@ $table-striped-columns-order: even !default;
     }
   }
 
+  // Card-like tables
+  //
+  // Round and clip a table without nesting it in a `.card`. Apply to a wrapper
+  // around `.table`, or combine with `.table-responsive` on the same element.
+  // Same look as `.border.rounded.overflow-hidden` + `.mb-0` on the table.
+
+  .table-card {
+    margin-bottom: var(--spacer);
+    overflow: hidden;
+    border: var(--border-width) solid var(--border-color-translucent);
+    @include border-radius(var(--radius-7));
+
+    > .table,
+    > [class*="table-responsive"] > .table {
+      margin-bottom: 0;
+    }
+
+    // Drop the last row border so it does not stack on the wrapper border.
+    // Same universal cell targeting as `.table`; wrapper + optional responsive
+    // nest pushes compound/combinator counts over the defaults.
+    // stylelint-disable selector-max-compound-selectors, selector-max-universal, selector-max-combinators
+    > .table > :not(caption):last-child > *:last-child > *,
+    > [class*="table-responsive"] > .table > :not(caption):last-child > *:last-child > * {
+      border-block-end-width: 0;
+    }
+    // stylelint-enable selector-max-compound-selectors, selector-max-universal, selector-max-combinators
+  }
+
   // Responsive tables
   //
   // Generate `.table-responsive` classes that act as container query contexts
diff --git a/site/src/content/docs/content/tables.mdx b/site/src/content/docs/content/tables.mdx
index 5a65188abdbd..9299319bd50a 100644
--- a/site/src/content/docs/content/tables.mdx
+++ b/site/src/content/docs/content/tables.mdx
@@ -243,6 +243,147 @@ Add `.table-borderless` for a table without borders.
 
 <Table class="table table-borderless" theme="dark" />
 
+## Card-like tables
+
+Need a bordered, rounded table without nesting it in a [card]([[docsref:/components/card]])? Wrap the table and clip the corners.
+
+### With utilities
+
+Compose [border]([[docsref:/utilities/border]]), [border radius]([[docsref:/utilities/border-radius]]), and [overflow]([[docsref:/utilities/overflow]]) utilities. Drop the table’s bottom margin with `.mb-0`.
+
+<Example code={`<div class="border rounded overflow-hidden">
+  <table class="table table-striped mb-0">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>John</td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`} customMarkup={`<div class="border rounded overflow-hidden">
+    <table class="table table-striped mb-0">
+      ...
+    </table>
+  </div>`} />
+
+### With `.table-card`
+
+Use `.table-card` for the same look. It rounds corners like a card, clips cell backgrounds, and removes the last row’s bottom border so it does not stack on the wrapper.
+
+<Example code={`<div class="table-card">
+  <table class="table table-hover">
+    <thead>
+      <tr>
+        <th scope="col">#</th>
+        <th scope="col">First</th>
+        <th scope="col">Last</th>
+        <th scope="col">Handle</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th scope="row">1</th>
+        <td>Mark</td>
+        <td>Otto</td>
+        <td>@mdo</td>
+      </tr>
+      <tr>
+        <th scope="row">2</th>
+        <td>Jacob</td>
+        <td>Thornton</td>
+        <td>@fat</td>
+      </tr>
+      <tr>
+        <th scope="row">3</th>
+        <td>John</td>
+        <td>Doe</td>
+        <td>@social</td>
+      </tr>
+    </tbody>
+  </table>
+</div>`} customMarkup={`<div class="table-card">
+    <table class="table table-hover">
+      ...
+    </table>
+  </div>`} />
+
+Combine it with a responsive wrapper when the table can overflow:
+
+<ResizableExample code={`<div class="table-responsive table-card">
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th scope="col">#</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+          <th scope="col">Heading</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">1</th>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+        </tr>
+        <tr>
+          <th scope="row">2</th>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+        </tr>
+        <tr>
+          <th scope="row">3</th>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+          <td>Cell</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>`} />
+
 ## Small tables
 
 Add `.table-sm` to make any `.table` more compact by cutting all cell `padding` in half.