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.
Carregando ferramenta… / Loading tool…
border-radius blob CSS forma orgânica
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.
Forma orgânica clássica. Funciona bem como avatar decorativo ou imagem recortada.
Padrão de balão de chat alinhado à direita. Inverta para esquerda.
Arredonda só o topo em forma de meia-elipse achatada. Útil como divisor de seção sem precisar de SVG.
É 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. Na notação elíptica, cada canto ainda pode ter raios horizontal e vertical separados, chegando a até oito valores.
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.
Sim. `@keyframes` com diferentes valores de border-radius em cada frame cria morphing fluido. O browser interpola automaticamente entre os estados, sem JavaScript.
Porque border-radius em px não escala com o tamanho do elemento. Um raio de 200px num elemento de 100×100px gera um círculo (o raio excede metade do lado e é normalizado), mas o mesmo 200px num elemento de 400×100px vira uma pílula alongada, não um círculo. Para um círculo garantido em qualquer proporção, use `border-radius: 50%`.
border-radius: 12px;O CSS é gerado localmente no navegador.