Gerador de border-radius
Arredonde cantos visualmente — arraste os cantos da prévia ou mude para formas blob orgânicas.
Arraste os pontos dos cantos para arredondá-los
Raios horizontais
Raios verticais
Como o gerador de border-radius funciona
Crie cantos arredondados arrastando a prévia e copie um valor de border-radius limpo — inclusive para formas blob orgânicas.
Arraste os cantos
Pegue qualquer ponto de canto na prévia e arraste-o para dentro — o raio acompanha o cursor. Vincule todos os cantos para um raio uniforme ou ajuste cada um separadamente.
Formas blob
Mude para o modo blob para usar a sintaxe de 8 valores com barra — raios horizontais e verticais por canto produzem formas suaves e orgânicas, populares em seções hero e avatares modernos.
Aleatório
Um clique gera um novo blob orgânico. Continue clicando até encontrar uma silhueta de que goste e depois faça o ajuste fino nos controles deslizantes.
Código limpo
O valor gerado é reduzido à forma correta mais curta: um único valor para cantos iguais, quatro valores ou a sintaxe completa com barra para blobs.
Perguntas frequentes
O border-radius aceita raios horizontais e verticais separados por uma barra: h1 h2 h3 h4 / v1 v2 v3 v4. Cada canto vira um quarto de elipse em vez de um quarto de círculo — é assim que se fazem formas blob orgânicas em CSS puro.
Pixels dão um tamanho de canto fixo, independentemente das dimensões do elemento — o melhor para cards e botões. Porcentagens acompanham o elemento — 50% em um quadrado formam um círculo perfeito, e as formas blob dependem de valores em porcentagem.
Não — o border-radius é rasterizado pelo compositor e tem custo baixíssimo, mesmo combinado com overflow: hidden ou transforms. Também é seguro animá-lo com transition.
Círculo: largura e altura iguais mais border-radius: 50%. Pílula: qualquer retângulo com border-radius de pelo menos metade da altura — o atalho mais comum é 999px.