Blob assimétrico
- Entrada
- Elemento 200×200px
- Saída esperada
- border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Forma orgânica clássica. Funciona bem como avatar decorativo ou imagem recortada.
border-radius blob CSS forma orgânica
Blob com border-radius CSS: formas orgânicas sem SVG
Uma das técnicas mais subestimadas do CSS é criar formas orgânicas usando a notação completa de border-radius com diferentes valores em cada canto. A propriedade aceita até oito valores quando a notação com barra é usada — separando o raio horizontal do vertical por canto. Resultado: blobs, balões de chat, formas de ondas e shapes que antes exigiam SVG ou imagem podem ser feitos em CSS puro.
A notação completa do border-radius
- A forma completa é: `border-radius: TL TR BR BL / TL-V TR-V BR-V BL-V`. Os quatro valores antes da barra controlam o raio horizontal de cada canto; os quatro depois controlam o vertical. Quando não há barra, os raios são iguais. Um blob típico usa valores alternados altos e baixos: `60% 40% 30% 70% / 60% 30% 70% 40%`.
- Blobs animados com CSS transition são extremamente performáticos porque só afetam compositing. Adicione `transition: border-radius 600ms ease-in-out` e mude os valores via JavaScript ou alternância de classes para criar blobs que se transformam suavemente.
Formas prontas com border-radius
Balão de chat (canto reto)
- Entrada
- Elemento variável de texto
- Saída esperada
- border-radius: 16px 16px 4px 16px;
Padrão de balão de chat alinhado à direita. Inverta para esquerda.
FAQ da ferramenta completa
É a propriedade que arredonda os cantos de um elemento. Aceita valores em px, %, rem ou qualquer unidade CSS, e pode controlar os quatro cantos de forma independente.
Perguntas frequentes
Border-radius blob afeta eventos de mouse/toque?
Não. Border-radius é visual apenas — o hitbox do elemento permanece retangular. Se precisar de hitbox no formato do blob, use clip-path ou SVG com pointer-events.
Blob CSS pode ser animado com @keyframes?
Sim. `@keyframes` com diferentes valores de border-radius em cada frame cria morphing fluido. O browser interpola automaticamente entre os estados, sem JavaScript.