Gerador de Border Radius

Uma declaração border-radius pode receber até quatro valores de canto independentes, além de uma sintaxe opcional de oito valores separados por barra para curvas orgânicas — mais peças móveis do que a maioria das pessoas imagina, até precisarem de algo além de um simples cartão arredondado. Este gerador coloca cada uma dessas peças no ecrã: quatro controles deslizantes para os cantos, cada um com a sua própria unidade em px ou percentagem, um atalho para vincular todos os cantos e criar formas simétricas, e um modo mancha para formas que nenhum valor único de raio consegue exprimir.

O modo cantos cobre as formas a que as pessoas realmente recorrem: vincule todos os cantos a um único controle para círculos, pílulas e squircles perfeitos, ou desvincule-os para arredondar apenas o topo de um painel suspenso ou apenas um dos lados de um cartão. Uma pré-visualização com padrão axadrezado atrás da forma, alternável entre fundo claro e escuro, torna óbvio quais os cantos que são cortados em cada raio — o mesmo truque visual que as ferramentas de ficheiros deste site usam para mostrar transparência.

O modo mancha é a outra metade: a sintaxe CSS de oito valores separados por barra permite que os raios horizontal e vertical de cada canto sejam diferentes, o que transforma um retângulo arredondado num contorno orgânico e irregular. Carregue em Aleatório para obter uma nova forma a qualquer momento e copie o CSS exato que está por detrás dela — sem exportação SVG nem bibliotecas externas. As páginas de pré-definição cobrem os pedidos que as pessoas realmente escrevem numa caixa de pesquisa: um círculo perfeito, um botão em forma de pílula de estádio, um squircle ao estilo iOS e uma mancha orgânica pronta a usar.

Como todas as ferramentas deste site, funciona inteiramente no seu browser: sem carregamentos, sem conta, e o gerador continua a funcionar offline depois de a página ser carregada.