O que é border-radius
A propriedade CSS border-radius arredonda os cantos de um elemento. Ela aceita até quatro valores, um para cada canto, na ordem: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo (sentido horário a partir do topo).
Formas comuns
| Efeito | Valores (TL TR BR BL) |
|---|---|
| Cantos uniformes (card padrão) | 16px em todos |
| Círculo perfeito (elemento quadrado) | 50% em todos |
| Formato "gota" | Apenas um canto com 0, os outros três arredondados |
| Pílula (botão) | Metade da altura do elemento em todos os cantos |
Dica
Para criar um círculo perfeito a partir de uma div quadrada, defina border-radius como 50% — funciona porque a porcentagem é relativa à largura/altura do próprio elemento.
Perguntas frequentes
Em que ordem os quatro valores de border-radius são aplicados?
Sempre no sentido horário, começando pelo canto superior esquerdo: superior-esquerdo, superior-direito, inferior-direito, inferior-esquerdo.
Como faço um círculo perfeito?
Aplique border-radius: 50% a um elemento com largura e altura iguais.
Posso usar porcentagem em vez de pixels?
Sim, o CSS aceita porcentagem, mas esta ferramenta trabalha em pixels para facilitar o ajuste visual preciso.
Border-radius funciona em imagens?
Sim, pode ser aplicado a qualquer elemento, incluindo tags <code><img></code>, para criar avatares e miniaturas arredondadas.