Gerador de border-radius
Modele os quatro cantos separadamente, vincule-os e copie a regra CSS border-radius.
100% privado — tudo roda no seu navegador
Como usar
- 1
Digite um raio por canto ou ative Vincular os quatro cantos.
- 2
Escolha um preset ou cole um border-radius existente para editar.
- 3
Copie o CSS gerado e use na sua folha de estilos.
Exemplos
Cartão arredondado
Entrada
16px nos quatro cantosSaída
border-radius: 16px;Arredondado só em cima
Entrada
16px 16px 0 0Saída
border-radius: 16px 16px 0 0;Perguntas frequentes
Como faço um círculo?
Com um elemento quadrado e os quatro cantos em 50%; o preset Círculo faz isso por você.
Os cantos podem ser diferentes?
Sim, cada canto aceita seu próprio valor, inclusive pares elípticos como 40% 20%.
Existe um máximo?
Qualquer comprimento é aceito, mas o navegador limita acima da metade do elemento.
Ferramentas relacionadas
Gerador de box-shadow CSSMonte um box-shadow CSS com controles ao vivo, presets e prévia e copie a regra pronta.Gerador de GradientesCrie gradientes CSS lineares e radiais visualmente e copie o código CSS.Gerador de Cores CSSTransforme uma cor base em uma escala de 10 tons e exporte como variáveis CSS.Formatador JSONFormate, embeleze, minifique e valide JSON na hora, direto no navegador.Validador JSONValide JSON instantaneamente e localize erros de sintaxe com linha, coluna e posição exatas — direto no seu navegador.Codificador/Decodificador Base64Codifique texto para Base64 e decodifique Base64 para texto, com suporte completo a Unicode e emoji — 100% no seu navegador.