Elysia Tools
Navegação
Design
Gera propriedades de raio de borda CSS
Execução
Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.
Exemplos
Relacionado
Pronto para executar
Guia de uso da ferramenta
O Gerador de Raio de Borda CSS é uma ferramenta prática para criar cantos arredondados em elementos web, permitindo ajustar cada vértice individualmente ou de forma uniforme para obter o estilo visual desejado.
Contexto
Preciso criar um botão de chamada para ação que tenha um visual amigável e moderno.
Problema
Definir manualmente os valores de border-radius para garantir que todos os cantos fiquem harmoniosos.
Como usar
Ajustei os quatro cantos para 12px para obter um arredondamento consistente.
topLeft: 12, topRight: 12, bottomRight: 12, bottomLeft: 12Resultado
O código gerado foi 'border-radius: 12px;', aplicado diretamente ao botão.
Contexto
Estou criando um layout de cartão onde apenas dois cantos opostos devem ser arredondados.
Problema
Calcular a sintaxe correta do CSS para cantos assimétricos.
Como usar
Desativei o raio uniforme e defini 20px para os cantos superior esquerdo e inferior direito, mantendo os outros em 0px.
É uma propriedade CSS que define o arredondamento dos cantos de um elemento, permitindo criar formas como círculos ou bordas suaves.
Sim, você pode ajustar individualmente os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Ao ativar o raio uniforme, o valor aplicado a um canto é automaticamente replicado para todos os outros, garantindo simetria total.
Sim, a propriedade border-radius é amplamente suportada por todos os navegadores modernos.
Não, a ferramenta é visual e intuitiva; basta ajustar os controles e copiar o código pronto para uso.
topLeft: 20, topRight: 0, bottomRight: 20, bottomLeft: 0Resultado
O código gerado foi 'border-radius: 20px 0px 20px 0px;', criando um efeito visual moderno e assimétrico.