diff --git a/demo/styles.html b/demo/styles.html
index 39e37ff..d12da7e 100644
--- a/demo/styles.html
+++ b/demo/styles.html
@@ -206,7 +206,7 @@ <h5>Border radius</h5>
         <dd>The most commonly used roundness. It’s recommended to keep the value between <code>0em</code> and <code>calc(var(--lumo-size-m) / 2)</code></dd>
       <dt>--lumo-border-radius-l</dt>
         <dd>Use for large containers, such as cards and dialogs. It’s recommended to keep the value between <code>0em</code> and <code>0.5em</code></dd>
-      <dt>--lumo-border-radius: <code>var(--lumo-border-radius-m)</code></dt>
+      <dt>--lumo-border-radius</dt>
         <dd>Deprecated. Use <code>--lumo-border-radius-m</code> instead.</dd>
     </dl>
 
diff --git a/style.html b/style.html
index 019c1d0..49a432e 100644
--- a/style.html
+++ b/style.html
@@ -6,9 +6,9 @@
     html {
       /* Border radius */
       --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
-      --lumo-border-radius-m: 0.25em; /* Button, text field, menu overlay, etc */
+      --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
       --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
-      --lumo-border-radius: var(--lumo-border-radius-m); /* Backwards compatibility */
+      --lumo-border-radius: 0.25em; /* Deprecated */
 
       /* Shadow */
       --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);