Gerador CSS Border Radius

Gerador CSS Border Radius - Crie Qualquer Estilo de Canto

Gere valores CSS border-radius de cantos arredondados simples a formas blob organicas complexas. Tres modos: simples para cantos uniformes, avancado para controle individual, e blob para criar formas organicas unicas.

O que e CSS border-radius?

CSS border-radius arredonda os cantos da borda de um elemento. Pode receber 1-4 valores:

Um valor: Mesmo raio para todos os cantos
border-radius: 20px;

Quatro valores: Cantos individuais (sentido horario do superior esquerdo)
border-radius: 20px 40px 60px 80px;

A propriedade aceita px, %, em, rem e outras unidades CSS. Usar 50% em um quadrado cria um circulo.

Como crio formas blob com border-radius?

Formas blob usam a sintaxe avancada de border-radius com 8 valores separados por barra (/):

border-radius: h1 h2 h3 h4 / v1 v2 v3 v4;

Os valores representam:
- h1-h4: Raios horizontais
- v1-v4: Raios verticais

Exemplo de forma blob:
border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;

Qual a diferenca entre unidades px e %?

Unidades Pixel (px):
- Tamanho fixo independente das dimensoes do elemento
- Melhor para tamanhos consistentes

Unidades Porcentagem (%):
- Relativas as dimensoes do elemento
- 50% em um quadrado cria um circulo
- Escala com o tamanho do elemento

Recursos principais

• Tres modos: Simples, Avancado e Blob
• Modo simples para raio de canto uniforme
• Modo avancado para controle individual de cantos
• Modo blob para criacao de formas organicas
• 12 formas predefinidas para comecar
• Gerador de formas blob aleatorias
• Suporte para unidades px e %
• Tamanho de visualizacao personalizavel
• Cor de visualizacao personalizavel
• Visualizacao ao vivo
• Copiar codigo CSS
• Processamento 100% no cliente
• Suporte ao modo escuro
• Interface amigavel para dispositivos moveis