Gerador de border-radius
Crie border-radius CSS com visualização.
Esquinas (horizontal)
border-radius: 16px;Gerador de border-radius CSS: cantos arredondados personalizados
A propriedade border-radius do CSS permite criar cantos arredondados em qualquer elemento HTML, desde círculos simples até formas orgânicas complexas. Nosso gerador oferece uma interface visual intuitiva onde pode ajustar cada canto independentemente e ver o resultado em tempo real.
A ferramenta suporta tanto border-radius simples (4 valores) quanto o formato avançado de 8 valores (raios horizontais / raios verticais) que permite criar curvas elípticas e formas orgânicas únicas. Presets populares incluem: canto único, pílula, bolha e formas assimétricas.
Border-radius é uma das propriedades CSS mais compatíveis: funciona em todos os navegadores modernos sem necessidade de prefixos há anos. Para criar um círculo perfeito, use border-radius: 50% em um elemento com mesma largura e altura. O código gerado está pronto para copiar e colar no seu projeto.
Perguntas frequentes
O que é o border-radius elíptico?
O border-radius elíptico usa a sintaxe de 8 valores: os primeiros 4 definem os raios horizontais e os últimos 4 os verticais, separados por "/". Isso permite criar cantos com curvas assimétricas, produzindo formas orgânicas mais complexas que o border-radius básico.
Como faço um círculo perfeito?
Para criar um círculo perfeito, defina border-radius: 50% em um elemento com a mesma largura e altura. No nosso gerador, use o preset "Pílula" (100px em todos os cantos) e certifique-se de que seu elemento seja quadrado.
É compatível com todos os navegadores?
Sim, border-radius é compatível com todos os navegadores modernos há anos, incluindo Chrome, Firefox, Safari, Edge e Opera. Não são necessários prefixos de fornecedor para nenhum navegador atual.