Gerador de Border Radius

Como funciona

Todo canto CSS é um quarto de elipse, e essa única frase explica boa parte da propriedade. No modo Simples um raio se aplica aos quatro cantos; no modo Por canto cada um tem o seu; no modo Blob cada canto ganha um raio horizontal e um vertical independentes, escritos com barra —o lado esquerdo da barra são os quatro raios horizontais, o direito os quatro verticais, sempre na ordem topo-esquerda, topo-direita, baixo-direita, baixo-esquerda.

Anatomia da sintaxe com barra

border-radius: 40% 60% 70% 30% / 30% 50% 70% 40% lê-se: raios horizontais CE CD BD BE, depois raios verticais CE CD BD BE. Quando os dois lados são iguais a barra simplesmente some do shorthand —é por isso que o gerador a omite automaticamente. Cada canto desenha então seu quarto de elipse com seu próprio raio horizontal e vertical, e é assim que nascem os blobs assimétricos.

50% vs px em caixas não quadradas

Porcentagem resolve por eixo, então 50% numa caixa 240×160 significa elipse de 120×80 em cada canto —estádio, não círculo. Um raio em px continua perfeitamente circular independentemente da caixa, mas precisa de pelo menos metade do lado menor para o visual totalmente redondo; qualquer valor maior é a mesma forma, e px enormes explícitos não estouram porque o navegador os escala proporcionalmente.

Por que 9999px vira cápsula

Botões pílula são arredondados com um raio deliberadamente impossível: 9999px é limitado à metade do lado mais curto —a regra da especificação é que, quando raios adjacentes de um lado excedem seu comprimento, todos os raios são reduzidos pelo mesmo fator. Resultado prático: numa pílula de 240×88 cada canto vira um quarto de círculo de 44px, os dois lados longos somem e sai a cápsula. O número exato não importa, só que seja grande.

Perguntas frequentes