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.
CSS border-radius blob organic shape
CSS border-radius blob: organic shapes without SVG
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.
The full border-radius notation
- The full form is: `border-radius: TL TR BR BL / TL-V TR-V BR-V BL-V`. The four values before the slash control the horizontal radius of each corner; the four after control the vertical. Without a slash, radii are equal. A typical blob uses alternating high and low values: `60% 40% 30% 70% / 60% 30% 70% 40%`.
- Animated blobs with CSS transition are extremely performant because they only affect compositing. Add `transition: border-radius 600ms ease-in-out` and change the values via JavaScript or class toggling to create blobs that transform smoothly.
Ready-made shapes with border-radius
Chat bubble (sharp corner)
- Input
- Elemento variável de texto
- Expected output
- border-radius: 16px 16px 4px 16px;
Right-aligned chat bubble pattern. Invert for left-aligned.
Full tool FAQ
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.
Frequently asked questions
Does border-radius blob affect mouse/touch events?
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.
Can a CSS blob be animated with @keyframes?
Yes. `@keyframes` with different border-radius values in each frame creates fluid morphing. The browser interpolates between states automatically, without JavaScript.