From 79796ab90d823e579c9d6dc7253cf9417d94e6de Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Thu, 24 Sep 2026 18:26:55 +0200
Subject: [PATCH] Fix .card-progress corner radius overflowing the card's
 rounded corners (#3170)

---
 .changeset/fix-card-progress-radius.md |  5 +++++
 core/scss/ui/_cards.scss               | 15 +++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fix-card-progress-radius.md

diff --git a/.changeset/fix-card-progress-radius.md b/.changeset/fix-card-progress-radius.md
new file mode 100644
index 000000000..5422857f4
--- /dev/null
+++ b/.changeset/fix-card-progress-radius.md
@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Fixed `.card-progress` to overlay the card like `.card-status`, so its rounded corners match the card's radius exactly.
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index f104c44ab..15f66f749 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -302,16 +302,23 @@ Stacked card
 }
 
 // Card progress
-.card-progress {
+// `.card >` outranks ui/_progress.scss's later `.progress { position: relative; }`.
+.card > .card-progress {
   --card-progress-height: #{$card-progress-height};
-  height: var(--card-progress-height);
+  --card-progress-offset: calc(-1 * var(--card-border-width));
+  position: absolute;
+  inset: var(--card-progress-offset);
+  width: auto;
+  height: auto;
+  pointer-events: none;
+  @include border-radius(var(--card-border-radius));
 
   &:last-child {
-    @include border-radius(0 0 2px 2px);
+    mask-image: linear-gradient(to top, #000 var(--card-progress-height), transparent var(--card-progress-height));
   }
 
   &:first-child {
-    @include border-radius(2px 2px 0 0);
+    mask-image: linear-gradient(to bottom, #000 var(--card-progress-height), transparent var(--card-progress-height));
   }
 }