Gerador de Border Radius
Arraste as alças de canto para esculpir blobs orgânicos com 8 raios independentes — depois copie o código CSS ou Tailwind.
Como usar o gerador de Border Radius
- Arraste qualquer uma das 4 alças de canto diretamente na caixa de pré-visualização para moldá-la visualmente.
- Refine com os controles deslizantes: cada canto tem um raio horizontal e vertical independentes.
- Experimente os presets — blobs, folha, ovo e formas de ticket a um clique.
- Combine as cores da caixa e do fundo com seu design real para uma pré-visualização precisa.
- Copie a declaração border-radius na aba CSS, ou pegue a classe Tailwind.
Sobre este gerador de Border Radius
A maioria das pessoas conhece border-radius como um único valor — mas a propriedade na verdade aceita até 8 valores: quatro raios horizontais e quatro raios verticais, separados por uma barra (ex.: border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%). Esta sintaxe com barra é o segredo por trás das formas orgânicas «blob» presentes em todo o design web moderno.
Este gerador expõe os 8 valores como controles deslizantes e como alças de canto arrastáveis, para que você esculpa exatamente a forma desejada sem memorizar a sintaxe. Quando todos os cantos compartilham raios horizontais e verticais iguais, a saída simplifica automaticamente para a notação padrão de 1–4 valores. O código gerado funciona em todos os navegadores modernos, e a aba Tailwind produz uma classe rounded-[...] de valor arbitrário.
FAQ de Border Radius
O que é a sintaxe com barra (/) no border-radius?
Em border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%, os valores antes da barra são os raios horizontais dos quatro cantos (superior esquerdo, superior direito, inferior direito, inferior esquerdo) e os de depois são seus raios verticais. Raios horizontais e verticais diferentes criam cantos elípticos — a base das formas blob orgânicas.
Como faço um círculo perfeito?
Defina todos os cantos em 50% (ou clique no preset Círculo). Num elemento quadrado, border-radius: 50% produz um círculo perfeito; num retângulo produz uma elipse. As porcentagens são relativas à largura e altura do próprio elemento.
Devo usar porcentagens ou pixels para border-radius?
Porcentagens escalam com o elemento, tornando as formas responsivas e ideais para blobs. Pixels dão um tamanho de canto fixo, melhor para componentes de UI como botões e cartões onde você quer arredondamento consistente independente do tamanho. Este gerador usa porcentagens para que suas formas mantenham a proporção em qualquer tamanho.
Por que meu blob parece achatado num elemento largo?
Raios em porcentagem são relativos às dimensões do elemento — 50% horizontal numa caixa de 400px de largura são 200px, enquanto 50% vertical numa caixa de 200px de altura são 100px. É o comportamento esperado: a forma se adapta à caixa. Pré-visualize na mesma proporção do seu elemento real para precisão.
A sintaxe de 8 valores funciona em todos os navegadores?
Sim. A sintaxe com barra para cantos elípticos faz parte da especificação CSS Backgrounds and Borders e é suportada por todos os navegadores modernos (Chrome, Edge, Firefox, Safari) — sem prefixos.