Neste artigo
Entendendo border-radius
A propriedade CSS border-radius arredonda os cantos da borda externa de um elemento. Aceita de um a quatro valores para controlar cada canto independentemente — superior esquerdo, superior direito, inferior direito e inferior esquerdo. Um único valor aplica o mesmo raio aos quatro cantos, enquanto quatro valores permitem criar formas assimétricas.
Border-radius funciona com qualquer elemento que tenha bordas, fundos ou sombras visíveis. Recorta tanto o fundo quanto a borda na forma arredondada e interage corretamente com box-shadow, outline e overflow.
Criando formas com border-radius
Variando os valores do raio, você pode criar uma ampla gama de formas geométricas inteiramente com CSS. O gerador permite ajustar visualmente cada canto e ver o resultado imediatamente.
- Forma pílula — defina border-radius como 9999px para criar extremidades totalmente arredondadas como um botão cápsula. É o padrão UI mais comum para tags, badges e botões pílula
- Círculo — aplique border-radius: 50% a um elemento quadrado (largura e altura iguais). A porcentagem é calculada em relação a cada dimensão, criando um círculo perfeito
- Formas de folha e blob — defina dois cantos opostos com valores altos e os outros dois com zero (ex. border-radius: 60% 0 60% 0) para criar formas orgânicas
Experimente gratuitamente — sem cadastro
Gerar CSS Border Radius →Cantos elípticos avançados
O atalho border-radius suporta uma sintaxe com barra (/) que permite definir raios horizontais e verticais separados para cada canto. Isso cria curvas elípticas em vez de circulares.
- Sintaxe com barra — border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% significa que os raios horizontais são todos 50%, mas os verticais diferem, criando uma forma de ovo
- Propriedades de cantos individuais — border-top-left-radius: 50px 30px define um canto elíptico com 50px de raio horizontal e 30px de raio vertical
- Comportamento de porcentagens — com porcentagens, o raio horizontal é relativo à largura e o vertical à altura. Portanto, 50% / 50% em um retângulo cria uma elipse, não um círculo
Perguntas frequentes
Devo usar porcentagens ou pixels para border-radius?
Use porcentagens quando quiser que o raio escale com o tamanho do elemento (círculos, elipses). Use pixels para arredondamento constante (botões, cards). Um padrão comum é 8px para componentes UI e 50% para avatares.
Border-radius causa problemas de renderização subpixel?
Em telas de alta resolução, valores pequenos de border-radius (1-2px) podem aparecer serrilhados. Usar um raio ligeiramente maior (mínimo 3-4px) pode melhorar a qualidade de renderização.
Como border-radius interage com bordas e outlines?
Border-radius arredonda a borda externa do border. Se o elemento tem uma borda grossa, o raio interno é calculado como raio-externo menos largura-borda. Outlines não seguem border-radius na maioria dos navegadores. Box-shadow segue a forma arredondada.