O que é CSS border-radius?

CSS border-radius arredonda os cantos do box de borda de um elemento. Aceita de um a quatro valores especificando o raio de cada canto. Pode criar círculos, elipses, formas pill e curvas orgânicas complexas.

Diferença entre a abreviação border-radius e as propriedades individuais de canto?

A abreviação aceita 1-4 valores no sentido horário. As propriedades individuais (border-top-left-radius, etc.) permitem dois valores para cantos elípticos assimétricos.

Como criar um círculo perfeito com border-radius?

Defina border-radius para 50% num elemento quadrado. Como valores percentuais são relativos às dimensões, 50% em cada direção cria uma elipse — um círculo quando largura igual altura.

O que são valores elípticos de border-radius?

border-radius pode aceitar dois valores por canto separados por barra, definindo raios horizontal e vertical independentemente: `border-radius: 50px / 25px`.

border-radius afeta a área de clique ou o overflow?

border-radius arredonda apenas a aparência visual. Para recortar conteúdo nos cantos adicione overflow: hidden.

Como usar border-radius num sistema de design?

Sistemas de design definem tokens de raio: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px).

border-radius é suportado em todos os navegadores?

border-radius é suportado em todos os navegadores modernos desde IE9. Não são necessários prefixos vendor.

Border Radius
Generator

Gere valores CSS border-radius com pré-visualização em tempo real. Controle cada canto independentemente ou bloqueie-os juntos.

Os 4 cantosBloquear / desbloquearCSS-ready

① Arraste os controles de raio ② Trave os cantos para uniformidade ③ Copie o CSS

Predefinições

Canto superior esquerdo: 20px

Canto superior direito: 20px

Canto inferior esquerdo: 20px

Canto inferior direito: 20px

CSS gerado

border-radius: 20px;

Cantos individuais

CSS border-radius aceita até 4 valores para controlar cada canto independentemente: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo (sentido horário).

Abreviatura

Quando todos os cantos são iguais, é emitido um único valor. CSS também suporta raios elípticos usando a sintaxe "/".

Unidades

Border-radius aceita px (absoluto), % (relativo ao tamanho do elemento) e outras unidades. 50% num quadrado cria um círculo perfeito.

CSS border-radius — cantos, formas e suporte dos browsers

A propriedade CSS border-radius arredonda os cantos de um elemento. Aceita até quatro valores no sentido horário com px, %, em ou rem. border-radius: 50% num quadrado cria um círculo perfeito; border-radius: 9999px cria uma forma pill. A sintaxe slash (border-radius: 50px / 25px) define cantos elípticos. Para recortar imagens, adicionar overflow: hidden. Suportado em todos os browsers modernos desde o CSS3. No Figma, colar os valores diretamente nos campos de raio de canto.

Perguntas frequentes

A propriedade CSS border-radius arredonda os cantos do border-box de um elemento. Aceita 1–4 valores de comprimento (px, %, em) para cada canto no sentido horário.

1 valor: todos os cantos iguais. 2 valores: TL/BR e TR/BL. 3 valores: TL, TR/BL, BR. 4 valores: TL, TR, BR, BL. Quando os quatro são iguais, o gerador emite um único valor.

Os valores em píxeis dão tamanhos absolutos de canto. As percentagens são relativas às dimensões do elemento — 50% cria um círculo se o elemento for quadrado.

Defina border-radius para 50% num elemento quadrado. Para elementos retangulares, border-radius: 50% / 50% cria uma elipse.

Border-radius tem impacto mínimo em elementos estáticos. Animar border-radius pode provocar repaints. Usar border-radius com transform na camada GPU é mais eficiente.

No Figma, border-radius é definido por canto no painel de design. No Sketch, use as alças de raio de canto. Ambos suportam raios mistos como este gerador.

Border-radius funciona na maioria dos elementos HTML. Em img requer overflow: hidden para recortar a imagem.

CSS border-radius — cantos, formas e suporte dos browsers

Perguntas frequentes

Explore a nossa rede