ZUI — Radii

Scale

--radius-sm3px × scale

--radius-md5px × scale

--radius-lg6px × scale

--radius-xl8px × scale

--radius-2xl12px × scale

--radius-3xl16px × scale

--radius-full9999px × scale

--radius-round50% × scale

Scaling

All radii (except --radius-round) are multiplied by --radius-scale. Change this single value to globally adjust roundness.

:root {
  --radius-scale: 1; /* default */
  --radius-scale: 0; /* sharp corners */
  --radius-scale: 2; /* extra round */
}

Usage

.card {
  border-radius: var(--radius-xl);
}

.avatar {
  border-radius: var(--radius-round);
}

Squircles

If you want softer, Apple-style corners, pair any radius token with the CSS corner-shape property. A superellipse() produces a smoother curve than a plain circular arc, and squircle is shorthand for the most common value.

Wrap it in an @supports query so browsers without corner-shape fall back to the normal rounded corner from border-radius.

.card {
  border-radius: var(--radius-xl);
}

@supports (corner-shape: squircle) {
  .card {
    corner-shape: superellipse(1.25);
    border-radius: 20px;
  }
}

The superellipse() argument controls the curve: higher values are squarer, lower values are rounder, and superellipse(1) equals a normal circular corner. The squircle keyword is equivalent to superellipse(2).