Radii
The corner-radius scale, from a hairline 2px to a full pill.
Radius tokens round corners consistently across the system, from a barely-there 2xs to the full pill / circle. On the web, @reva/ui derives its rounded-* utilities from a single --radius base so the whole ladder can scale together (and bump under the squircle progressive-enhancement).
| Token | Value | Pixels | Description |
|---|---|---|---|
| 2xs | 0.125rem | 2px | 2x extra small radius (2px) |
| xs | 0.25rem | 4px | Extra small radius (4px) |
| sm | 0.375rem | 6px | Small radius (6px) |
| md | 0.5rem | 8px | Medium radius (8px) |
| lg | 0.75rem | 12px | Large radius (12px) |
| xl | 1rem | 16px | Extra large radius (16px) |
| 2xl | 1.25rem | 20px | 2x large radius (20px) |
| 3xl | 1.5rem | 24px | 3x large radius (24px) |
| 4xl | 2rem | 32px | 4x large radius (32px) |
| 5xl | 2.5rem | 40px | 5x large radius (40px) |
| 6xl | 3rem | 48px | 6x large radius (48px) |
| 7xl | 3.5rem | 56px | 7x large radius (56px) |
| full | 9999px | 9999px | Full pill / circle radius |
Squircle corners
Every rung above resolves from one line — calc(var(--radius) * var(--radius-scale) * k): a single --radius base, a per-rung multiplier k, and one shared --radius-scale. That shared scale is the hook.
Where the browser supports CSS corner-shape, @reva/ui paints superellipse — "squircle" — corners and bumps --radius-scale to 1.75, re-scaling the entire ladder from a single declaration with zero per-component edits. The bump isn't arbitrary: a squircle of radius R hugs the corner more tightly than a round corner of the same R, so scaling up preserves the visual weight you designed for — softer silhouette, same presence. Browsers without support ignore the block entirely and render today's exact border-radius, pixel-for-pixel; rounded-full always stays a true circle or pill.
Same box, same rung — only --radius-scale (×1 vs ×1.75) and corner-shape set them apart.