diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index a71f25e..06b3b37 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -72,7 +72,7 @@ body {
     top: 10vh;
     left: 0;
     right: 0;
-    border-radius: .25rem;
+    border-radius: var(--border-radius);
     box-shadow: black 0 .5rem 1.5rem -.8rem;
 
     input[type='search'] {
diff --git a/docs/pages/utilities/border.md b/docs/pages/utilities/border.md
index 015492a..e28d3d8 100644
--- a/docs/pages/utilities/border.md
+++ b/docs/pages/utilities/border.md
@@ -34,6 +34,14 @@ Use the `rounded` and `rounded-full` classes to control the border radius.
 ```
 
 ```css
-.rounded      { border-radius: .25rem; } /* 4px */
-.rounded-full { border-radius: 9999px; }
+.rounded      { border-radius: var(--border-radius); }
+.rounded-full { border-radius: 9999px;               }
+```
+
+The border radius can be adjusted or even removed (setting it to `0`) by the corresponding custom property:
+
+```css
+:root {
+  --border-radius: .25rem; /* 4px */
+}
 ```
diff --git a/src/_config.css b/src/_config.css
index d9d692c..ca0ae71 100644
--- a/src/_config.css
+++ b/src/_config.css
@@ -56,4 +56,6 @@
   --shadow-inset:  0 2px .25rem 0 inset;
   --shadow-float:  0 .25rem .75rem -.4rem;
 
+  /* Borders */
+  --border-radius: .25rem;
 }
diff --git a/src/_utilities.css b/src/_utilities.css
index 5b5a2b3..457bdfc 100644
--- a/src/_utilities.css
+++ b/src/_utilities.css
@@ -1,6 +1,6 @@
 /* Border */
 .rounded {
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
 }
 .rounded-full {
   border-radius: 9999px;
diff --git a/src/components/_button.css b/src/components/_button.css
index bde00f8..2c4233b 100644
--- a/src/components/_button.css
+++ b/src/components/_button.css
@@ -6,7 +6,7 @@ a.button {
   align-items: center;
   appearance: none;
   background-color: var(--color-bg-accent);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   border: 0;
   box-shadow: black var(--shadow-float);
   box-sizing: border-box;
diff --git a/src/components/_callout.css b/src/components/_callout.css
index b3401f1..326b2b2 100644
--- a/src/components/_callout.css
+++ b/src/components/_callout.css
@@ -4,7 +4,7 @@
   padding: 1.5rem 2rem;
   background-color: var(--color-bg-muted);
   border-left: .25rem solid var(--color-text-muted);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
 
   &.accent {
     border-color: var(--color-accent);
diff --git a/src/components/_input.css b/src/components/_input.css
index f01e9aa..05bc6e4 100644
--- a/src/components/_input.css
+++ b/src/components/_input.css
@@ -165,7 +165,7 @@ select,
 
   .affix {
     display: inline-block;
-    border-radius: .25rem;
+    border-radius: var(--border-radius);
     padding: .75rem 1rem;
     font-size: .875rem;
 
diff --git a/src/core/_form.css b/src/core/_form.css
index 4848163..47b41de 100644
--- a/src/core/_form.css
+++ b/src/core/_form.css
@@ -1,6 +1,6 @@
 /* <fieldset>, <legend> */
 fieldset {
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   border: 1px solid var(--color-border);
   padding: 1rem;
   display: flex;
@@ -63,7 +63,7 @@ input[type="datetime"],
 input[type="datetime-local"],
 textarea,
 select {
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   padding: .75rem 1rem;
   font-size: .875rem;
 }
@@ -94,7 +94,7 @@ input[type="radio"] {
   }
 }
 input[type="checkbox"] {
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   position: relative;
   &::after {
     border: 2px solid var(--color-bg-page);
@@ -166,7 +166,7 @@ input[type="range"] {
   &::-moz-range-track {
     border: 0;
     background-color: var(--color-bg-base);
-    border-radius: .25rem;
+    border-radius: var(--border-radius);
     box-shadow: var(--color-shadow) var(--shadow-inset);
     height: .5rem;
     padding: 1px 0;
@@ -216,7 +216,7 @@ input[type="reset"],
 button {
   appearance: none;
   background-color: var(--color-bg-accent);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   border: 0;
   box-shadow: black var(--shadow-float);
   box-sizing: border-box;
diff --git a/src/core/_misc.css b/src/core/_misc.css
index c9cacfa..1964f62 100644
--- a/src/core/_misc.css
+++ b/src/core/_misc.css
@@ -53,7 +53,7 @@ figure {
 meter {
   appearance: meter;
   background: var(--color-bg-base);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   border: 0;
   box-shadow: var(--color-shadow) var(--shadow-inset);
   display: block;
@@ -71,7 +71,7 @@ meter {
   &::-webkit-meter-bar,
   &::-moz-meter-bar {
     background: var(--color-accent);
-    border-radius: .25rem;
+    border-radius: var(--border-radius);
     box-shadow: rgba(0, 0, 0, 0.30) 0 1px 1px 0;
   }
   &::-webkit-meter-optimum-value,
diff --git a/src/core/_text.css b/src/core/_text.css
index a41f724..d6d2fd7 100644
--- a/src/core/_text.css
+++ b/src/core/_text.css
@@ -38,7 +38,7 @@ a {
   color: var(--color-link);
   text-underline-offset: 0;
   transition: var(--transition-color), var(--transition-underline);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
 
   &:hover, &:focus, &:focus-within {
     color: var(--color-link-hover);
@@ -146,7 +146,7 @@ var {
 code {
   background: color-mix(in srgb, var(--color-border) 60%, transparent);
   color: var(--color-text-em);
-  border-radius: .25rem;
+  border-radius: var(--border-radius);
   font-family: var(--font-mono);
   font-weight: 400;
   font-size: .875em;