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

O que a sintaxe border-radius de 8 valores realmente faz?

border-radius: 70% 30% 30% 70% / 60% 40% 60% 40% significa raios HORIZONTAIS (antes de /) e VERTICAIS (após /) por canto. O resultado são curvas elípticas (não circulares) em cada canto, produzindo formas blob orgânicas. Cada canto recebe par único x-radius y-radius, permitindo efeitos assimétricos impossíveis com valor único.

Quando usar as quatro propriedades detalhadas border-*-radius em vez da abreviada?

A opção Detalhada gera cada canto como sua própria propriedade:

border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 12px;

Quando preferir detalhada:
- Tematizar ou sobrescrever UM canto sem reescrever toda a abreviada (por exemplo, um token de design como --radius-md aplicado só aos cantos superiores).
- CSS-in-JS / styled-components, onde propriedades individuais se combinam de forma mais previsível que uma abreviada que redefine os quatro cantos.
- Fluxos de linter ou especificidade que sinalizam a abreviada por sobrepor valores herdados por canto.

Quando preferir abreviada: o atalho `border-radius` é mais compacto e colapsa para menos valores quando os cantos se repetem — 4 cantos iguais viram um valor (border-radius: 12px). Use o campo Seletor CSS para envolver qualquer formato em uma regra pronta para colar como `.card { ... }`. Para cantos elípticos assimétricos (botões tipo pílula), a forma com barra `border-radius: 50px / 20px` define um raio horizontal e um vertical para todos os cantos de uma vez.

Por que 50% em elemento não quadrado cria elipse em vez de círculo?

Porcentagem é relativa às dimensões da CAIXA: raios horizontais conforme largura, verticais conforme altura. Em caixa 200x100px, border-radius: 50% dá raio horizontal 100px e vertical 50px — uma elipse. Para forçar círculo em qualquer retângulo use border-radius: 9999px (px é absoluto), trava à metade do lado mais curto.

Essas formas blob têm boa performance ou prejudicam o rendering?

Border-radius é altamente otimizado em todos os navegadores — é operação pura de shader GPU, custando essencialmente nada em qualquer valor. Diferente de clip-path CSS ou máscaras SVG, border-radius NÃO requer recomputação ao redimensionar. Pode aplicar blob a milhares de elementos sem impacto em FPS.

Devo usar border-radius ou clip-path para formas não retangulares?

Border-radius para curvas orgânicas (blobs, formas suaves); clip-path para polígonos angulares (hexágonos, estrelas, paths custom). Border-radius anima suave. Clip-path é mais potente para geometria SVG-style mas mais pesado em GPU e difícil de debugar. Para componentes UI como cards e avatares, prefira border-radius. Para divisores decorativos, clip-path ou SVG.

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