Gerador CSS border-radius
Crie a sintaxe resumida border-radius a partir de valores individuais por canto, com cantos elípticos e equivalente Tailwind.
Gerador CSS border-radius
Defina um raio para cada canto e esta ferramenta monta o CSS border-radius correto para si, reduzido à forma mais curta possível — um valor quando todos os quatro cantos correspondem, dois ou três quando cantos opostos se repetem, e a lista completa de quatro valores quando cada canto é diferente. Foi criado para qualquer pessoa que esteja a formatar cards, botões, avatares, modais ou campos de entrada que deseja CSS limpo e copiável sem fazer a matemática dos cantos manualmente.
Escolha "Igual em todos os cantos" para um simples retângulo arredondado, ou mude para "Cantos individuais" para ajustar cada canto de forma independente em px, percentagem ou rem. Ao ativar cantos elípticos, adiciona a notação de oito valores com barra que border-radius suporta — um raio horizontal e um raio vertical distinto por canto, controlado por um regulador de proporção, para que uma squircle ou uma forma de pílula achatada exija apenas um ajuste em vez de oito campos. A opção "Bolha orgânica aleatória" gera uma forma assimétrica fresca a cada execução, o tipo de contorno macio e irregular usado atrás de imagens de herói e bolhas decorativas. Mude o resultado entre a sintaxe border-radius resumida e as quatro propriedades border-*-radius expandidas, e ative a opção Tailwind para obter a classe de utilidade de valor arbitrário correspondente ao lado do CSS simples.
Os valores são validados enquanto escreve: números negativos são tratados como zero e não há estado que produza CSS quebrado. O tally ao vivo sob o resultado informa quantas linhas de declaração foram geradas, quantos valores de canto distintos a sintaxe resumida condensou e a contagem exata de caracteres, atualizando conforme ajusta qualquer opção.
Tudo funciona localmente no seu navegador — nenhum valor de canto ou CSS gerado é jamais enviado para qualquer lugar. Copie o resultado, faça o download como ficheiro .txt ou envie-o diretamente para a entrada de outra ferramenta para continuar a trabalhar nele.