Scalable fluid border‑radius

Scalable-fluid-border‑radius.md

A drop‑in, scalable border‑radius system that harmonizes with fluid typography using CSS clamp() — minimal, practical, and responsive.

---

Why this works

• Fluid typography: scales between a min & max viewport width.

• Fluid radii: scales the corner rounding in proportion to type size.

• Uses CSS clamp() — fully supported and recommended for fluid design.

  • MDN on clamp() → https://developer.mozilla.org/docs/Web/CSS/clamp
  • Responsive typography guide (CSS‑Tricks) → https://css-tricks.com/snippets/css/fluid-typography/

---

Base setup (fluid font scale)

:root {
  /* fluid font scale */
  --font-min: 1rem;
  --font-max: 1.25rem;
  --viewport-min: 320;
  --viewport-max: 1200;

  font-size:
    clamp(
      var(--font-min),
      calc(var(--font-min) + (var(--font-max) - var(--font-min)) * ((100vw - var(--viewport-min)px) / (var(--viewport-max) - var(--viewport-min))),
      var(--font-max)
    );
}

---

Scalable border‑radius tokens

Define radii relative to the computed font size:

:root {
  /* base radii scale */
  --radius-sm: 0.25em;
  --radius-md: 0.5em;
  --radius-lg: 1em;
}

Since em is based on the current font size, radius scales fluidly with type.

---

Optional: “Fluidified” radius using clamp

If you want tighter control like fluid typography:

:root {
  /* fluid border radius */
  --br-min: 4px;
  --br-max: 16px;

  --radius-fluid:
    clamp(
      var(--br-min),
      calc(var(--br-min) + (var(--br-max) - var(--br-min)) * ((100vw - 320px) / (1200 - 320))),
      var(--br-max)
    );
}

Apply:

.card {
  border-radius: var(--radius-fluid);
}
.button {
  border-radius: var(--radius-md); /* or var(--radius-fluid) */
}

---

Practical usage

Purpose	Use
Small UI rounding	border-radius: var(--radius-sm)
Medium (buttons/cards)	border-radius: var(--radius-md)
Soft, large rounding	border-radius: var(--radius-lg)
Fully fluid	border-radius: var(--radius-fluid)

---

Results

• Radius scales organically with type size.
• No JS needed — pure CSS, responsive system.

---

References

• MDN: clamp() — https://developer.mozilla.org/docs/Web/CSS/clamp
• CSS‑Tricks: Fluid Typography — https://css-tricks.com/snippets/css/fluid-typography/