From db903c3a1b736317084bc65ef5758a688e83003f Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Wed, 16 Sep 2026 17:30:10 +0200
Subject: [PATCH] Fix `.card-status-*` strip corner radius not matching the
 card (#3070)

Co-authored-by: codecalm <codecalm@gmail.com>
---
 .changeset/fix-card-status-corner-radius.md |  5 +++
 core/package.json                           |  2 +-
 core/scss/ui/_cards.scss                    | 41 +++++++++++----------
 3 files changed, 27 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/fix-card-status-corner-radius.md

diff --git a/.changeset/fix-card-status-corner-radius.md b/.changeset/fix-card-status-corner-radius.md
new file mode 100644
index 000000000..5a346d907
--- /dev/null
+++ b/.changeset/fix-card-status-corner-radius.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.card-status-*` strip corners not matching the card's `border-radius`.
diff --git a/core/package.json b/core/package.json
index c8cc36b3d..d7d7b679a 100644
--- a/core/package.json
+++ b/core/package.json
@@ -82,7 +82,7 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "84 kB"
+        "maxSize": "85 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index c00b5b4d4..2f72b1d95 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -423,33 +423,34 @@ Card optinos
 /**
 Card status
  */
-.card-status-top {
+// The strip is a full-size overlay with the card's own radius, masked down to
+// a band along one edge, so the colored edge follows the card's rounded
+// corners exactly instead of a separate box whose radius never matches.
+.card-status-top,
+.card-status-start,
+.card-status-bottom {
+  --card-status-size: #{$card-status-size};
+  --card-status-offset: #{$card-status-offset};
   position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: $card-status-offset;
-  top: $card-status-offset;
-  height: $card-status-size;
-  @include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
+  inset: var(--card-status-offset);
+  pointer-events: none;
+  @include border-radius(var(--card-border-radius));
+}
+
+.card-status-top {
+  mask-image: linear-gradient(to bottom, #000 var(--card-status-size), transparent var(--card-status-size));
 }
 
 .card-status-start {
-  position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: auto;
-  top: $card-status-offset;
-  bottom: $card-status-offset;
-  width: $card-status-size;
-  @include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
+  mask-image: linear-gradient(to right, #000 var(--card-status-size), transparent var(--card-status-size));
+
+  [dir="rtl"] & {
+    mask-image: linear-gradient(to left, #000 var(--card-status-size), transparent var(--card-status-size));
+  }
 }
 
 .card-status-bottom {
-  position: absolute;
-  inset-inline-start: $card-status-offset;
-  inset-inline-end: $card-status-offset;
-  top: initial;
-  bottom: $card-status-offset;
-  height: $card-status-size;
-  @include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
+  mask-image: linear-gradient(to top, #000 var(--card-status-size), transparent var(--card-status-size));
 }
 
 /**