diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index 797b5bdbd9f2..abd0a81ac4f9 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -163,10 +163,7 @@ export class HaExpansionPanel extends LitElement {
         box-shadow: none;
         border-width: 1px;
         border-style: solid;
-        border-color: var(
-          --ha-card-border-color,
-          var(--divider-color, #e0e0e0)
-        );
+        border-color: var(--outline-color);
         border-radius: var(--ha-card-border-radius, 12px);
       }
 
diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts
index 789dbcfa9c50..36b9b0cec3ec 100644
--- a/src/components/ha-outlined-button.ts
+++ b/src/components/ha-outlined-button.ts
@@ -13,7 +13,7 @@ export class HaOutlinedButton extends OutlinedButton {
       :host {
         --ha-icon-display: block;
         --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-outline: var(--divider-color);
+        --md-sys-color-outline: var(--outline-color);
       }
     `,
   ];
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index a9b95a92ca38..8d14d63d417c 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -33,6 +33,7 @@ documentContainer.innerHTML = `<custom-style>
       --light-primary-color: #b3e5fC;
       --accent-color: ${DEFAULT_ACCENT_COLOR};
       --divider-color: rgba(0, 0, 0, .12);
+      --outline-color: rgba(0, 0, 0, .12);
 
       --scrollbar-thumb-color: rgb(194, 194, 194);
 
diff --git a/src/resources/styles-data.ts b/src/resources/styles-data.ts
index 1b295c5e147e..6d60dcab7d2a 100644
--- a/src/resources/styles-data.ts
+++ b/src/resources/styles-data.ts
@@ -11,6 +11,7 @@ export const darkStyles = {
   "switch-unchecked-button-color": "#999999",
   "switch-unchecked-track-color": "#9b9b9b",
   "divider-color": "rgba(225, 225, 225, .12)",
+  "outline-color": "rgba(225, 225, 225, .12)",
   "mdc-ripple-color": "#AAAAAA",
   "mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",
 
@@ -110,7 +111,7 @@ export const derivedStyles = {
   "mdc-radio-disabled-color": "var(--disabled-text-color)",
   "mdc-tab-text-label-color-default": "var(--primary-text-color)",
   "mdc-button-disabled-ink-color": "var(--disabled-text-color)",
-  "mdc-button-outline-color": "var(--divider-color)",
+  "mdc-button-outline-color": "var(--outline-color)",
   "mdc-dialog-scroll-divider-color": "var(--divider-color)",
   "mdc-dialog-heading-ink-color": "var(--primary-text-color)",
   "mdc-dialog-content-ink-color": "var(--primary-text-color)",