O que é CSS Border Radius?
A propriedade CSS border-radius arredonda os cantos de um elemento. Você pode definir todos os quatro cantos uniformemente ou controlar individualmente cada canto para formas criativas como pílulas, círculos ou designs orgânicos.
Padrões Comuns de Border Radius
- Formato pílula: Defina border-radius como metade da altura do elemento (ex.:
border-radius: 9999px). - Círculo: Use
border-radius: 50%em um elemento quadrado. - Arredondamento sutil: Valores pequenos como 4-8px para cantos de cards e botões.
Perguntas Frequentes
Posso usar porcentagens para border-radius?
Sim. Valores em porcentagem são relativos às dimensões do elemento. 50% em um elemento quadrado cria um círculo perfeito. Em elementos não quadrados, cria uma elipse.
Border-radius funciona com imagens?
Sim. Aplique border-radius diretamente em elementos <img> ou em seu contêiner para criar formas de imagem arredondadas. Combine com overflow: hidden para bordas limpas.