diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index 4eb3d788f7..8becaf367d 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -113,7 +113,7 @@ class DateRangePickerElement extends WrappedElement {
             top: auto;
             box-shadow: var(--ha-card-box-shadow, none);
             background-color: var(--card-background-color);
-            border-radius: var(--ha-card-border-radius, 16px);
+            border-radius: var(--ha-card-border-radius, 12px);
             border-width: var(--ha-card-border-width, 1px);
             border-style: solid;
             border-color: var(
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 1d2fc01f02..b00fa0ae51 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -16,7 +16,7 @@ export class HaCard extends LitElement {
         );
         box-shadow: var(--ha-card-box-shadow, none);
         box-sizing: border-box;
-        border-radius: var(--ha-card-border-radius, 16px);
+        border-radius: var(--ha-card-border-radius, 12px);
         border-width: var(--ha-card-border-width, 1px);
         border-style: solid;
         border-color: var(
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index d6e792bf52..21b7fb1c1d 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -161,7 +161,7 @@ export class HaExpansionPanel extends LitElement {
           --ha-card-border-color,
           var(--divider-color, #e0e0e0)
         );
-        border-radius: var(--ha-card-border-radius, 16px);
+        border-radius: var(--ha-card-border-radius, 12px);
       }
 
       .summary-icon {
diff --git a/src/html/onboarding.html.template b/src/html/onboarding.html.template
index 351f06ed70..4ae951443f 100644
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -16,7 +16,7 @@
       .content {
         box-sizing: border-box;
         padding: 20px 16px;
-        border-radius: var(--ha-card-border-radius, 16px);
+        border-radius: var(--ha-card-border-radius, 12px);
         max-width: 432px;
         margin: 64px auto 0;
         box-shadow: var(
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index c3ff340692..e4e3911d2d 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -647,7 +647,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
         }
 
         img {
-          border-radius: var(--ha-card-border-radius, 16px);
+          border-radius: var(--ha-card-border-radius, 12px);
           width: 100%;
         }
 
diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index 5b34dccef0..6c4827a633 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -317,7 +317,7 @@ export default class HaAutomationAction extends LitElement {
         ha-alert {
           display: block;
           margin-bottom: 16px;
-          border-radius: var(--ha-card-border-radius, 16px);
+          border-radius: var(--ha-card-border-radius, 12px);
           overflow: hidden;
         }
         .handle {
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index ee83f2d96a..44b404c23c 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -505,8 +505,8 @@ export default class HaAutomationConditionRow extends LitElement {
           overflow: hidden;
           transition: max-height 0.3s;
           text-align: center;
-          border-top-right-radius: var(--ha-card-border-radius, 16px);
-          border-top-left-radius: var(--ha-card-border-radius, 16px);
+          border-top-right-radius: var(--ha-card-border-radius, 12px);
+          border-top-left-radius: var(--ha-card-border-radius, 12px);
         }
         .testing.active {
           max-height: 100px;
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index 70fdfb17d6..2b0bd7e1c2 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -346,7 +346,7 @@ export default class HaAutomationCondition extends LitElement {
         ha-alert {
           display: block;
           margin-bottom: 16px;
-          border-radius: var(--ha-card-border-radius, 16px);
+          border-radius: var(--ha-card-border-radius, 12px);
           overflow: hidden;
         }
         .handle {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 3ba9373939..23911c1d9c 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -617,8 +617,8 @@ export default class HaAutomationTriggerRow extends LitElement {
           overflow: hidden;
           transition: max-height 0.3s;
           text-align: center;
-          border-top-right-radius: var(--ha-card-border-radius, 16px);
-          border-top-left-radius: var(--ha-card-border-radius, 16px);
+          border-top-right-radius: var(--ha-card-border-radius, 12px);
+          border-top-left-radius: var(--ha-card-border-radius, 12px);
         }
         .triggered.active {
           max-height: 100px;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 3e143f9441..02365c581c 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -875,8 +875,8 @@ export class HaIntegrationCard extends LitElement {
           --mdc-icon-button-size: 32px;
           transition: height 0.1s;
           overflow: hidden;
-          border-top-left-radius: var(--ha-card-border-radius, 16px);
-          border-top-right-radius: var(--ha-card-border-radius, 16px);
+          border-top-left-radius: var(--ha-card-border-radius, 12px);
+          border-top-right-radius: var(--ha-card-border-radius, 12px);
         }
         .hasMultiple.single .back-btn {
           height: 24px;
diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts
index 46f156152f..d0d718acf6 100644
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@@ -129,8 +129,8 @@ export class HaIntegrationHeader extends LitElement {
       color: var(--text-on-state-color);
       text-align: center;
       padding: 2px;
-      border-top-left-radius: var(--ha-card-border-radius, 16px);
-      border-top-right-radius: var(--ha-card-border-radius, 16px);
+      border-top-left-radius: var(--ha-card-border-radius, 12px);
+      border-top-right-radius: var(--ha-card-border-radius, 12px);
     }
     .header {
       display: flex;
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 2a2bc515e2..59ccec7ae5 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -278,15 +278,15 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
       }
 
       .header {
-        border-top-left-radius: var(--ha-card-border-radius, 16px);
-        border-top-right-radius: var(--ha-card-border-radius, 16px);
+        border-top-left-radius: var(--ha-card-border-radius, 12px);
+        border-top-right-radius: var(--ha-card-border-radius, 12px);
         margin-bottom: 16px;
         overflow: hidden;
       }
 
       .footer {
-        border-bottom-left-radius: var(--ha-card-border-radius, 16px);
-        border-bottom-right-radius: var(--ha-card-border-radius, 16px);
+        border-bottom-left-radius: var(--ha-card-border-radius, 12px);
+        border-bottom-right-radius: var(--ha-card-border-radius, 12px);
         margin-top: -16px;
         overflow: hidden;
       }
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index ebb188a17f..249b6db5fe 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -231,7 +231,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         flex: 1;
         min-width: 0;
         min-height: 40px;
-        border-radius: calc(var(--ha-card-border-radius, 12px) - 2px);
+        border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
         transition: background-color 180ms ease-in-out;
       }
       ha-tile-info:focus {
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 1190fc1154..df8cd17670 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -352,7 +352,7 @@ export class HuiCardPicker extends LitElement {
           max-width: 500px;
           display: flex;
           flex-direction: column;
-          border-radius: var(--ha-card-border-radius, 16px);
+          border-radius: var(--ha-card-border-radius, 12px);
           background: var(--primary-background-color, #fafafa);
           cursor: pointer;
           position: relative;
@@ -407,7 +407,7 @@ export class HuiCardPicker extends LitElement {
           box-sizing: border-box;
           border: var(--ha-card-border-width, 1px) solid
             var(--ha-card-border-color, var(--divider-color));
-          border-radius: var(--ha-card-border-radius, 16px);
+          border-radius: var(--ha-card-border-radius, 12px);
         }
 
         .manual {