Gerador de raio de borda CSS

O CSS Border Radius Generator é um editor visual para a propriedade CSS border-radius Você arrasta um controle deslizante para cada canto, assiste a um elemento de visualização redondo em tempo real e copia o CSS exato que ele produz - sem adivinhar valores de pixel e recarregar a página.

A propriedade Border-Radius parece simples, mas possui uma abreviação compacta que leva as pessoas para cima: um valor arredonda todos os quatro cantos, dois valores definem as duas diagonais e quatro valores são executados no sentido horário a partir do canto superior esquerdo. Esta ferramenta permite definir cada canto independentemente e, em seguida, produz a taquigrafia equivalente mais curta automaticamente, para que seu CSS permaneça limpo.

Tudo é executado no seu navegador. Comece com um preset como cartão, pílula, círculo ou blob, ajuste cada canto, troque a unidade entre pixels e porcentagens e copie a declaração. Sem conta, sem uploads e ele continua funcionando offline depois que a página é carregada.

Porcentagens e pixels se comportam de maneira diferente em qualquer coisa que não seja quadrada, e a diferença surpreende as pessoas Um raio de pixel é a mesma curva em cada canto, enquanto uma porcentagem é medida contra cada eixo separadamente, então 50 por cento em uma caixa larga dá uma elipse em vez de um círculo Essa é a propriedade que transforma um retângulo em uma pílula ou em uma forma de lente A especificação também protege você da geometria impossível: quando os raios ao longo de uma borda somam mais do que o comprimento dessa borda, o navegador escala cada raio no elemento proporcionalmente em vez de sobrepô-los, então um grande valor silenciosamente para de crescer A saída usa a abreviação válida mais curta, e é por isso que quatro cantos iguais colapsam para um único número.

Como um gerador CSS de raio de borda, a parte útil é que ele faz a aritmética abreviada para você Defina Top Esquerda e Inferior Direita para 24 e Superior Direita e Inferior Esquerda para 8, em px, e a saída lê border-radius: 24 px 8 px; porque os pares diagonais combinam Drop Bottom Direita para 0 e torna-se o valor de três 24 px 8 px 0 px, já que Top Direita e Inferior Esquerda ainda correspondem Você pode verificar cada resultado contra a visualização antes de copiar, que é para o que serve um gerador de raio de borda CSS.