Border Radius Generator
Sculpt organic "blob" shapes by dragging eight handles around the box, or switch to simple mode to round four corners precisely. Watch the preview update live, randomise for inspiration, and copy the border-radius CSS.
Drag the eight handles around the box edges to morph the shape.
CSS Code
CSS border-radius: From Rounded Corners to Organic Blobs
Everyone knows border-radius for rounding the corners of buttons and cards. Fewer people know it can also sculpt smooth, asymmetric "blob" shapes that have become a staple of modern landing pages and illustrations. The secret is the property's full eight-value syntax.
The Shorthand Most People Use
In its simplest form, border-radius takes one to four values for the corners, clockwise from the top-left: border-radius: 12px rounds all four equally, while border-radius: 12px 24px 0 8px sets top-left, top-right, bottom-right, and bottom-left independently. Use pixels for fixed rounding and percentages for corners that scale with the element.
The Full Eight-Value (Elliptical) Syntax
Each corner can actually have two radii — a horizontal and a vertical one — which makes the corner an ellipse rather than a circle. You separate the two groups with a slash:
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
The four values before the slash are the horizontal radii (top-left, top-right, bottom-right, bottom-left) and the four after are the matching vertical radii. When the horizontal and vertical radii of a corner differ, that corner bulges asymmetrically — and combining all eight produces the fluid, hand-drawn blob look. That's exactly what the eight draggable handles in Blob mode control.
Where Blobs Shine
- Hero illustrations — frame a photo or avatar in a soft organic shape instead of a hard rectangle.
- Background decorations — large, low-contrast blobs add depth and movement behind content.
- Buttons & badges — subtle asymmetry gives a friendly, handcrafted feel.
- Animated morphing — transition between two blob radius sets to make a shape gently breathe.
Tips for Clean Results
Blobs read best on square or near-square elements — extreme aspect ratios distort the curve. If two adjacent radii add up to more than the side length, the browser scales them down proportionally, so your shape may differ slightly from the raw numbers. For an animated blob, keep the same structure in both keyframes and transition the border-radius value; pair it with a slow, ease-in-out timing for a calm, liquid motion.
Frequently Asked Questions
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;. The four values before the slash are horizontal radii and the four after are vertical radii. Drag the handles in Blob mode here to shape one visually.