Gere um valor border-radius de CSS

Informe comprimentos ou porcentagens CSS comuns e receba tanto o valor abreviado quanto a propriedade border-radius completa. A ordem segue a especificação CSS, para que você possa estilizar cada canto de forma consistente sem precisar deduzir qual posição controla cada um. Raios negativos são rejeitados porque não são válidos em folhas de estilo.

Escolha de um a quatro valores de raio

Comece com a quantidade de valores adequada à forma desejada. Um valor aplica o mesmo raio aos quatro cantos, solução ideal para cartões, botões, campos e outros componentes simétricos. Dois valores se alternam entre cantos opostos: o primeiro controla os cantos superior esquerdo e inferior direito, enquanto o segundo controla o superior direito e o inferior esquerdo. Com três valores, o primeiro corresponde ao canto superior esquerdo, o segundo ao superior direito e ao inferior esquerdo, e o terceiro ao inferior direito. Quatro valores oferecem controle independente no sentido horário: superior esquerdo, superior direito, inferior direito e inferior esquerdo. Cada item deve ser um comprimento CSS ou uma porcentagem não negativa, como 8px, 0.5rem, 12% ou 0. O zero sem unidade é aceito porque o CSS permite essa forma, mas qualquer outro número precisa de uma unidade de comprimento reconhecida ou do sinal de porcentagem. Manter as entradas separadas deixa visível a relação entre posição e canto antes da montagem do shorthand final.

Entenda e use o CSS gerado

O resultado contém dois campos voltados a fluxos de trabalho diferentes. O campo border_radius traz somente o valor abreviado, o que é conveniente quando uma aplicação já sabe qual propriedade CSS está definindo ou quando um pipeline de tokens de design precisa de um valor limpo. O campo css contém a declaração completa, incluindo o nome da propriedade border-radius, os dois-pontos e o ponto e vírgula, para que você possa colá-la diretamente em uma regra de estilo. Os valores são emitidos na mesma ordem fornecida, separados por um único espaço. O gerador não reorganiza cantos, converte unidades nem reduz valores repetidos silenciosamente, pois preservar a representação informada mantém a saída previsível e evita alterações na sintaxe intencional dos tokens. Por exemplo, ao fornecer 8px e 16px, você recebe border-radius: 8px 16px;, enquanto quatro valores formam uma declaração no sentido horário. A saída é determinística e não usa medições dependentes do navegador; por isso, a API e a ferramenta executada localmente retornam exatamente as mesmas strings.

Valide os raios antes de publicar um componente

Raios de canto no CSS não podem ser negativos, portanto o gerador interrompe o processamento com um erro de entrada sempre que um valor começa com sinal de menos. Ele também rejeita itens vazios, texto incompatível, números não nulos sem unidade, declarações com pontuação e arrays fora do intervalo de um a quatro valores. Essa validação ajuda quando as escolhas vêm de um formulário, arquivo de configuração, editor de temas ou compilação automatizada de tokens de design, situações em que texto malformado poderia chegar despercebido a uma folha de estilo. São aceitas unidades absolutas, relativas à fonte, relativas à viewport, físicas e percentuais comuns, entre elas px, em, rem, vw, vh, vmin, vmax, ch, cm, mm, in, pt e pc, além das variantes modernas de viewport. Esta capacidade gera o shorthand padrão com um raio por canto; ela não cria a sintaxe elíptica separada por barra. Se você precisar de cantos elípticos, mantenha os raios horizontal e vertical separados em seu próprio CSS. Use a declaração retornada como bloco validado e teste-a no elemento real, pois porcentagens dependem das dimensões desse elemento.