Propriedade de Raio da Borda
Última atualização: 2026-09-13
border-radius Propriedade de Raio da Borda
A propriedade border-radius arredonda os cantos agudos de um elemento, sendo uma das propriedades decorativas mais usadas no design de UI moderno. Aceita valores de comprimento ou porcentagem, e quanto maior o valor, mais acentuado o arredondamento. Quando o raio atinge metade do comprimento do lado ou mais, o canto vira um semicírculo ou um círculo completo.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | all |
| Tipo de Animação | length |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ];⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
<length> | Tipo | Raio de canto fixo |
<percentage> | Tipo | Porcentagem relativa ao tamanho do elemento |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| border-radius | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v3.1 | ✓ v10.5 |
| Suportado em todos os principais navegadores | |||||
Dica： border-radius: 50% combinado com largura e altura iguais desenha um círculo perfeito, comumente usado para recorte de avatares.
Dica： Aceita de 1 a 4 valores, e a sintaxe com barra define os raios horizontal e vertical separadamente, por exemplo border-radius: 20px / 10px para cantos elípticos.
❓ Perguntas Frequentes
Qborder-radius funciona em elementos img?
ASim. A propriedade border-radius se aplica à borda da border-box do elemento e funciona em elementos substituídos como <img> também. Dê a uma imagem border-radius: 50% com largura e altura iguais para obter um avatar circular. Observe que o conteúdo da imagem pode transbordar os cantos arredondados, por isso é comum adicionar overflow: hidden no contêiner.
QA porcentagem em border-radius é relativa a quê?
AAs porcentagens são resolvidas em relação à própria largura e altura do elemento — o raio horizontal em relação à largura e o raio vertical em relação à altura. Assim, border-radius: 50% forma um círculo perfeito em um elemento quadrado, mas uma elipse em um retângulo. Este é o truque por trás de avatares circulares e botões em formato de cápsula.
QComo desenhar um círculo perfeito e um formato de cápsula?
ACírculo: largura e altura iguais mais border-radius: 50%. Cápsula: border-radius: 999px — quando o valor excede metade da altura, as duas extremidades viram automaticamente semicírculos completos. Em um retângulo, 50% dá uma elipse, então para cápsulas use 999px ou um grande valor fixo em pixels.
QO que significa a sintaxe com barra border-radius: 20px / 10px?
AO lado esquerdo da barra é o raio horizontal e o direito é o raio vertical, produzindo cantos elípticos. Por exemplo, border-radius: 50% / 25% deixa o arco horizontal mais largo que o vertical. Sem a barra, os dois raios são iguais. Você também pode escrever dois grupos separados por barra para formatar cada um dos quatro cantos independentemente.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
