Sobre esta ferramenta
Cantos arredondados definem o tom de uma interface, e border-radius pode fazer muito mais do que um único valor uniforme. Este gerador permite arredondar cada canto de forma independente e usar a sintaxe completa de oito valores horizontal/vertical para criar formas “blob” suaves e orgânicas que não lembram em nada um retângulo comum.
Arraste os controles, veja a forma atualizar ao vivo e copie o CSS de border-radius. Tudo roda no seu navegador.
Perguntas frequentes
Qual a diferença entre o modo vinculado e o modo por canto?
O modo vinculado aplica um raio uniforme em pixels aos quatro cantos; ao desmarcá-lo, você entra no modo por canto, onde define uma porcentagem horizontal e vertical independente para cada canto.
Posso criar cantos elípticos (não circulares)?
Sim. Mude para o modo por canto e defina porcentagens horizontais e verticais diferentes — o border-radius do CSS suporta dois raios por canto, e esta ferramenta expõe os dois.
Como faço um círculo perfeito ou um formato de pílula?
Para um círculo, defina o raio uniforme como 50% da largura/altura do elemento (ou use o modo por canto a 50%/50%); para um formato de pílula, defina o raio para pelo menos metade da altura do elemento.
Meu design é enviado para algum lugar?
Não. A caixa de pré-visualização e o CSS gerado são calculados apenas localmente no seu navegador.
Por que a saída às vezes usa uma barra (/) no CSS?
A barra separa os raios horizontal e vertical (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — isso só aparece no modo por canto, já que o modo vinculado precisa de apenas um valor.