Gerador de Border Radius CSS com Preview
A propriedade border-radius vai muito além de simples cantos arredondados. Com controle individual por canto e valores elípticos, você pode criar formas orgânicas e assimétricas interessantes. O Gerador de Border Radius CSS oferece controle visual completo com preview em tempo real.
Sintaxe completa do border-radius
O CSS permite definir dois raios por canto: horizontal e vertical. Com a notação border-radius: X% Y% / A% B%, você pode criar formas elípticas complexas. A ferramenta abstrai essa complexidade em sliders intuitivos.
Controles por canto
- Superior esquerdo (border-top-left-radius)
- Superior direito (border-top-right-radius)
- Inferior esquerdo (border-bottom-left-radius)
- Inferior direito (border-bottom-right-radius)
- Opção de travar todos os cantos para ajuste simultâneo
Além dos botões: usos criativos
Border-radius é usado para criar formas de "gota d'água" (100% num canto, 0 nos outros), shapes folha (50% nos cantos diagonais), e as formas orgânicas que vemos em cards de design moderno.
Acesse: Gerador de Border Radius CSS
Perguntas Frequentes
Como criar um círculo perfeito com border-radius?
Use border-radius: 50% em um elemento com largura e altura iguais.
Qual a unidade melhor, px ou %?
Porcentagem é mais responsiva pois se adapta ao tamanho do elemento. Pixels são úteis quando você quer um raio fixo independente do tamanho.
border-radius funciona em imagens?
Sim, mas adicione overflow: hidden ao container da imagem para que o recorte seja aplicado corretamente.