Gerador CSS de border-radius e formas blob

Dois percentuais por canto formam um border-radius elíptico. Comece por um modelo ou digite seus valores e copie a regra gerada.

Funciona localmente no seu navegador

Ver categoria: Frontend e design (34)

· border-radius · elliptical corners · blob presets

PAINEL DE CONTROLE

PRÉVIA

EXPORTAR CSS

Como moldar um border-radius e copiar a declaração

A bancada escreve uma única declaração para o elemento: border-radius com um valor horizontal e outro vertical por canto, junto com a largura e a altura usadas na prévia. O palco parte de uma caixa de 280 × 220 px, então a mudança de 18 % para 50 % aparece na hora.

Não há botão de executar: a forma e o painel de código acompanham cada alteração. Copiar CSS coloca esse mesmo bloco na área de transferência e Redefinir devolve a página a Cantos suaves (280 × 220, 18 %).

Comece por um modelo (Personalizado, Cantos suaves, Pílula, Seixo ou Blob) ou digite nos oito campos de canto: X é o raio horizontal e Y o vertical, cada um entre 0 e 100 por cento.

Ajuste a prévia com Largura (120 a 520 px) e Altura (120 a 420 px). A caixa usa essas dimensões em pixels enquanto os raios continuam em porcentagem, e é por isso que os mesmos números parecem diferentes em um botão e em um avatar.

Acompanhe o palco e o painel de código enquanto digita. Ao editar qualquer campo, o seletor de modelo muda para Personalizado, então o nome sempre combina com os valores.

Valores fora da faixa se ajustam ao confirmar: um canto de 999 vira 100, uma largura de 999 vira 520 px, 3.7 permanece em um canto e arredonda para 4 px nos tamanhos.

Use Copiar CSS para levar o bloco .rounded-shape e renomeie a classe ao colar. Redefinir recupera Cantos suaves a qualquer momento.

Modelos, cantos elípticos e a regra exportada

Os cinco modelos e os oito cantos

Personalizado (28 %), Cantos suaves (18 %) e Pílula (50 % em uma caixa de 320 × 160) são simétricos: os oito valores coincidem. Seixo (290 × 230) e Blob (280 × 250) misturam os cantos; o Seixo começa em 58 / 42 no canto superior esquerdo e 34 / 62 no superior direito, então o contorno deixa de parecer um retângulo arredondado.

Cada canto leva dois percentuais porque o CSS desenha o canto como uma elipse: o primeiro valor é o raio horizontal e o segundo o vertical. A exportação ordena superior esquerdo, superior direito, inferior direito, inferior esquerdo, primeiro a linha horizontal e, depois da barra, a vertical.

Por que a porcentagem acompanha o elemento

Um border-radius em porcentagem é resolvido contra a caixa do próprio elemento, e não contra um número fixo de pixels, então uma mesma declaração serve para um botão largo e para um avatar pequeno. Os campos de largura e altura existem para demonstrar isso: eles redimensionam a prévia, não os raios da declaração.

O navegador também limita raios que se sobreporiam em uma borda, então a forma desenhada pode parecer menor que os números. O painel de código mostra sempre os valores realmente usados, e por isso os campos se ajustam assim que você sai deles.

A regra exportada e o processamento local

O código gerado é um bloco único: .rounded-shape com width, height e uma linha border-radius na forma horizontal / vertical. Não há prefixos de fabricante, media queries nem seletores extras, então basta colar e renomear a classe.

Tudo roda na página: valores e escolhas não saem do navegador. Copiar CSS copia o bloco e a barra de status confirma, então a regra é segura de preparar antes de entrar na folha de estilos.