Radius
Eight border-radius stops from nearly straight to blob-style. Radius is a brand decision as much as a UI decision.
Border-radius is one of the most underrated decisions in UI. The
straighter, the more institutional; the rounder, the friendlier.
A bank picks rounded-md. A meditation app picks rounded-2xl.
The tone of the brand lives in that choice.
How it works
Tailwind v4 declares eight stops, from xs (0.125rem / 2px) to
4xl (2rem / 32px). These primitives automatically generate the
rounded-xs, rounded-sm, ..., rounded-4xl utilities.
Important note: the stopless --radius token that Gremorie
components consume does not live here. It is defined per theme
in packages/tokens/styles - the Default theme uses 0.625rem,
perplexity.css uses 0.375rem, and so on. Each theme picks
the radius that matches its personality.
Tokens
| Amostra | Token | Classe | Rem | Pixels | Uso |
|---|---|---|---|---|---|
| --radius-xs | rounded-xs | 0.125rem | 2px | Toque de suavização — quase reto | |
| --radius-sm | rounded-sm | 0.25rem | 4px | Inputs em tema austero, separadores | |
| --radius-md | rounded-md | 0.375rem | 6px | Default de inputs e botões pequenos | |
| --radius-lg | rounded-lg | 0.5rem | 8px | Cards, modais, painéis | |
| --radius-xl | rounded-xl | 0.75rem | 12px | Cards generosos, surfaces friendly | |
| --radius-2xl | rounded-2xl | 1rem | 16px | Cards arredondados, pegada moderna | |
| --radius-3xl | rounded-3xl | 1.5rem | 24px | Cards muito arredondados, pílulas grandes | |
| --radius-4xl | rounded-4xl | 2rem | 32px | Surfaces blob-style, ilustrações |
Best practices
- Decide early. Changing the system radius halfway through a project is expensive; almost everything needs to be revisited.
- Keep the hierarchy. Outer cards get a larger radius, pills and badges a smaller one. Inputs and buttons usually land on the same stop (form consistency).
rounded-fullexists and is useful, but watch out for pills that are too thin (a radius proportional to the height can look odd).- Do not mix more than 3 stops on the same screen. Beyond that, radius becomes visual noise instead of hierarchy.
- Theme matters. If the product theme uses
--radius: 0.5rem, think twice before hardcodingrounded-2xlin a component - you are overriding the theme's personality.