Border radius
Tokens de arredondamento baseados no valor base --radius: 12px.
Escala visual
none
rounded-none
var(--radius-none)
sm
rounded-sm
calc(var(--radius) - 4px)
DEFAULT
rounded
calc(var(--radius) - 2px)
md
rounded-md
calc(var(--radius))
lg
rounded-lg
calc(var(--radius) + 2px)
xl
rounded-xl
calc(var(--radius) + 4px)
full
rounded-full
var(--radius-full)
Uso por componente
| Componente | Radius | Preview |
|---|---|---|
| Button | rounded | |
| Input | rounded | |
| Card | rounded-md | |
| Dialog | rounded-sm | |
| Badge | rounded-full | |
| Avatar | rounded-full | |
| Tooltip | rounded |