Radii

Border radius tokens scaled by --radius-scale for global roundness control.

Scale

--radius-sm 3px × scale

--radius-md 5px × scale

--radius-lg 6px × scale

--radius-xl 8px × scale

--radius-2xl 12px × scale

--radius-3xl 16px × scale

--radius-full 9999px × scale

--radius-round 50% × scale

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 */
}

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

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