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.
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.
border-radius: 12px;CSS is generated locally in your browser.