Gerador de border-radius

O que é um gerador de border-radius

Dá-lhe controlos para os quatro cantos de uma caixa e escreve o CSS. Arredonde os quatro por igual e obtém uma pílula ou um círculo; arredonde-os de forma diferente e saem aquelas formas de gota que aparecem em cabeçalhos e avatares.

Este acrescenta a parte que os outros deixam de fora. O CSS tem uma regra sobre o que acontece quando os raios que pede não cabem na caixa, e faz algo mais surpreendente do que cortá-los. O painel por baixo da pré-visualização mostra-lhe o resultado dessa regra enquanto arrasta.

Tudo corre no seu navegador. Nada é enviado e não há conta.

Como usar o gerador

1. Defina o tamanho da caixa. A largura e a altura importam mais do que parece, porque saber se os seus raios cabem depende inteiramente delas. Um raio que fica bem num cartão não fica bem num botão.
2. Arraste os cantos. Cada canto tem um controlo por omissão. Ligue os cantos elípticos para dar a cada um um raio horizontal e outro vertical: é para isso que serve a barra na forma abreviada.
3. Leia o painel e copie. Se o factor de escala descer abaixo de 1, os números riscados são o que pediu e os do lado são o que é desenhado. O bloco de CSS é a declaração pronta a colar.

A regra que muda cantos em que nunca tocou

Imagine um botão de 160 por 44 com 8px nos quatro cantos, e decide que o canto superior esquerdo deve ter um arco grande de 40px. Muda um valor. O que é desenhado são 36,7px nesse canto — e 7,3px nos outros três.

Não é um artefacto de arredondamento nem uma esquisitice do navegador. Está na especificação. O CSS Backgrounds and Borders Level 3 diz que, quando os dois raios que se encontram num lado somam mais do que o comprimento desse lado, calcula-se f como a menor razão entre o comprimento do lado e a soma dos seus raios entre os quatro lados, e então, se f for menor que 1, multiplica-se por f o raio de todos os cantos do elemento. Não o do canto culpado. O de todos.

A correcção é global. Empurre um canto para além do que a caixa aguenta e a forma inteira encolhe em proporção, incluindo cantos que não editou e que por si sós eram perfeitamente legais. Depois de se saber isto, muito CSS que quase encaixava passa a fazer sentido.

O caso mais conhecido é pedir um círculo sobre algo que não é quadrado. Ponha 100px nos quatro cantos de uma caixa de 200 por 100 e o f sai exactamente 0,5, por isso cada canto é desenhado a 50px: um estádio, não um círculo. Costuma explicar-se dizendo que o raio é limitado a metade da altura. Essa descrição dá aqui a resposta certa por acaso, e a regra é outra: é um único factor aplicado a tudo, e por isso também muda os cantos do lado comprido.

Vale a pena conhecer o limite com precisão. A especificação diz que o escalamento se aplica apenas se f for menor que 1, por isso um círculo sobre um quadrado — 50px numa caixa de 100 por 100 — fica exactamente em cima da linha e não é escalado. Um pixel a mais e o f passa a 0,9901, e todos os cantos começam a encolher. Esta ferramenta segue a especificação nessa fronteira em vez de a arredondar.

Limitações assumidas

A pré-visualização é um elemento real com um border-radius real, por isso o que vê é o seu próprio navegador a desenhá-lo; mas os números do painel são calculados a partir da especificação e não lidos do navegador. É deliberado, porque não há nada para ler: o escalamento acontece ao pintar a caixa, e o valor que uma folha de estilos declara é o que você definiu.

Aqui está tudo em píxeis. As percentagens são válidas em border-radius e resolvem-se contra a largura e a altura da própria caixa, o que as torna a melhor escolha para o que for adaptável, mas transformam a questão de saber se os seus raios cabem numa que muda com a janela. Se usar percentagens, a regra continua a aplicar-se; simplesmente não a consegue ver numa pré-visualização fixa.

A ferramenta modela uma caixa lisa. Não se desenham bordas, espaçamento nem a diferença entre a curva exterior e a interior: um elemento real com uma borda grossa tem um segundo raio, mais pequeno, no canto interno, que a especificação deriva subtraindo a espessura da borda. É uma parte legítima do border-radius e fica fora do âmbito de um gerador.

Aqui não há squircle, e não pode haver. As formas suavemente arredondadas do hardware da Apple são superelipses, uma família de curvas diferente do quarto de elipse que o CSS especifica, e nenhuma combinação de valores de border-radius reproduzirá uma. Conseguir esse aspecto na web exige um clip-path ou um SVG, e qualquer ferramenta que prometa um squircle só com border-radius promete algo que a propriedade não consegue fazer.

O motor leva 30 verificações. A principal não é uma tabela de saídas esperadas mas a propriedade que a regra existe para garantir: em 20 000 caixas aleatórias, os dois raios de nenhum lado somam alguma vez mais do que o comprimento desse lado depois do escalamento — a par de um controlo que confirma que essas mesmas entradas a violam antes, de modo a que o teste não possa ser satisfeito por uma função que reduza tudo a zero. Uma sabotagem deliberada que cortava cada canto isoladamente, que é o que vários geradores fazem, falha essa suite em quatro sítios.

Porque é gratuito

Quatro controlos e uma divisão são trabalho que a sua própria máquina faz num instante. Nada é enviado, não há conta e não há nada para marcar de água.

Se quiser cores em vez de cantos, o gerador de gradientes e o conversor de cor deste site estão ao lado, também sem enviar nada.