Border Radius
Os cantos arredondados ajudam a definir a identidade visual e a hierarquia dos componentes. Esta página reúne as escalas e diretrizes oficiais do sistema.
Não aplique valores personalizados de border-radius. Prefira sempre a escala documentada do sistema.
Boas Práticas
Quando usar
Aplicar border radius seguindo a escala definida pelo sistema.
Utilizar os arredondamentos oficiais para manter consistência visual.
Manter consistência de arredondamento entre componentes semelhantes.
Aplicar arredondamentos proporcionais ao contexto do componente.
Quando não usar
Utilizar valores fora da escala oficial.
Aplicar arredondamentos sem contexto ou necessidade clara.
Misturar diferentes padrões de radius na mesma interface.
Utilizar cantos que comprometam legibilidade ou consistência visual.
Border Radius
Escala oficial de border radius utilizada para definir cantos arredondados de forma consistente.
border radius
| Name | Value |
|---|---|
| 2 | |
| 4 | |
| 6 | |
| 8 | |
| 12 | |
| 16 | |
| 24 | |
| 32 | |
| 999 |
Escala visual
| Name | px | Preview | Uso |
|---|---|---|---|
| rounded-xs | 2px | Tags inline, micro elementos | |
| rounded-sm | 4px | Badges, chips | |
| rounded-md | 6px | Inputs, botões | |
| rounded-lg | 8px | Cards e modais — padrão | |
| rounded-xl | 12px | Cards maiores | |
| rounded-2xl | 16px | Drawers, painéis | |
| rounded-3xl | 24px | Containers grandes | |
| rounded-4xl | 32px | Elementos hero | |
| rounded-full | 999 | Avatares, badges redondos |
--ui-radius
| Name | 0.25rem (4px) | 0.125rem (2px) | 0.375rem (6px) |
|---|---|---|---|
| 4 | 2 | 6 | |
| 6 | 3 | 9 | |
| 8 | 4 | 12 |
As cores utilizadas no border radius são as cores definidas em Tokens › Borda.
Regras de aplicação
Cada valor de arredondamento segue uma escala fixa para garantir consistência visual entre interfaces e componentes.
Utilize os valores de arredondamento definidos pelo sistema e evite aplicar medidas manuais fora da escala oficial.
Exemplos de uso
<!-- Card padrão -->
<div class="rounded-lg border p-4">...</div>
<!-- Avatar -->
<img class="rounded-full w-10 h-10" />
<!-- Radius dinâmico do tema -->
<div class="rounded-[calc(var(--ui-radius)*2)]">...</div>