border-radius responsivo botões CSS

Border-radius em botões e cards: escolha certa para cada escala

Sistemas de design estabelecidos como Material Design 3, Tailwind e Radix UI definem escalas de raio específicas para cada componente. O princípio geral: elementos menores (chips, badges) usam raios maiores em %; elementos maiores (modais, panels) usam px fixos. A consistência na escala de raio é tão importante para a identidade visual quanto a paleta de cores.

Unidade

UniformeTodos os cantos12px

Presets

Preview e CSS

border-radius: 12px;

O CSS é gerado localmente no navegador.

Continuar na ferramenta

Abrir ferramenta completa

Mais páginas desta ferramenta

Blob com border-radius CSS: formas orgânicas sem SVG

Escala de raio em sistemas de design

O Tailwind usa uma escala de 7 níveis: `sm` (2px) → `xl` (12px) → `2xl` (16px) → `3xl` (24px) → `full` (9999px). O Material Design 3 usa shape tokens categorizados: Extra Small (4px), Small (8px), Medium (12px), Large (16px), Extra Large (28px), Full. Manter sua aplicação alinhada a uma dessas escalas torna o resultado visualmente coerente sem esforço consciente.
Pílulas (border-radius: 9999px) funcionam melhor para elementos de largura variável como tags e badges. Para botões de largura fixa, raios de 6–12px tendem a envelhecer melhor do que pílulas ou quadrados perfeitos.

Raios por tipo de componente

Botão primário (M3 Small)

Entrada: Botão 120×40px
Saída esperada: border-radius: 8px;

Token Small do Material Design 3. Adequado para botões de ação principais.

Modal/Dialog (M3 Extra Large)

Entrada: Dialog 480×320px
Saída esperada: border-radius: 28px;

Token Extra Large do Material Design 3. Adequado para surfaces de tamanho médio.

FAQ da ferramenta completa

O que é border-radius em CSS?

É a propriedade que arredonda os cantos de um elemento. Aceita valores em px, %, rem ou qualquer unidade CSS, e pode controlar os quatro cantos de forma independente.

Como fazer um círculo com border-radius?

O que é o border-radius elíptico?

Como criar um blob com CSS?

Qual a ordem dos valores no shorthand de quatro cantos?

Border-radius funciona com imagens?

Posso animar border-radius?

Há diferença de performance entre px e % no border-radius?

Perguntas frequentes

Qual border-radius usar em cards?

Para cards, 8–16px é o range mais comum. M3 recomenda 12px (Medium). Tailwind recomenda `rounded-xl` (12px) ou `rounded-2xl` (16px). A escolha depende da escala geral da interface.

Devo usar px ou rem no border-radius?

Para bordas visuais de interface, px tende a ser mais previsível porque o raio não muda com o zoom de fonte. Para elementos que devem escalar com preferências do usuário, rem é mais acessível.