Asymmetric blob
- Input
- Elemento 200×200px
- Expected output
- border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
Classic organic shape. Works well as a decorative avatar or clipped image.
Carregando ferramenta… / Loading tool…
CSS border-radius blob organic shape
One of the most underrated CSS techniques is creating organic shapes using the full border-radius notation with different values in each corner. The property accepts up to eight values when slash notation is used, separating horizontal from vertical radius per corner. The result: blobs, chat bubbles, wave shapes and forms that previously required SVG or images can be done in pure CSS.
Classic organic shape. Works well as a decorative avatar or clipped image.
Right-aligned chat bubble pattern. Invert for left-aligned.
Rounds only the top into a flattened half-ellipse. Useful as a section divider without needing SVG.
It's the property that rounds the corners of an element. It accepts values in px, %, rem or any CSS unit, and can control all four corners independently. In elliptical notation each corner can even have separate horizontal and vertical radii, reaching up to eight values.
No. Border-radius is visual only, the element hitbox remains rectangular. If you need a hitbox matching the blob shape, use clip-path or SVG with pointer-events.
Yes. `@keyframes` with different border-radius values in each frame creates fluid morphing. The browser interpolates between states automatically, without JavaScript.
Because border-radius in px does not scale with the element's size. A 200px radius on a 100×100px element produces a circle (the radius exceeds half the side and gets normalized), but the same 200px on a 400×100px element becomes an elongated pill, not a circle. For a guaranteed circle at any aspect ratio, use `border-radius: 50%`.
border-radius: 12px;CSS is generated locally in your browser.