CSS border-radius with 8-corner blob shapes. Free, private, runs in your browser.
100% private — your files never leave your browser. All processing happens locally on your device.
Tailwind presets
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
`border-radius: 16px` gives you a rounded rectangle. `border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%` gives you an organic blob. The difference is the slash — before the slash are the horizontal radii for each corner (TL, TR, BR, BL); after the slash are the vertical radii. When they differ, the corners become asymmetric ellipses instead of circles, and the shape stops looking like a rectangle at all. This is how CSS-only blob shapes work.
Percent-based radii are relative to the element's width and height. 50% on a square gives a circle; 50% on a wide rectangle gives a pill. This scaling is useful for hero shapes and decorative sections where the shape should adapt to its container. Pixel radii are absolute — `16px` is 16px whether the element is 100px or 1000px wide. Use pixels for UI components (buttons, cards, inputs) where consistency across sizes matters, and percents for anything meant to feel bespoke or illustrative.
Simple mode gives you one value per corner — four numbers total, and horizontal and vertical radii are locked together. This is what you want for buttons, cards, and any shape that should read as 'rounded rectangle.' Advanced mode unlocks the eight individual values (four horizontal + four vertical), which is what the slash syntax addresses. Use advanced for blobs, asymmetric shapes, and anything organic. Both modes share the same live preview — flip between them any time.
`border-radius` is universally supported. The slash-syntax for asymmetric corners is also widely supported across all modern browsers including IE9+. No vendor prefixes needed. If you're supporting ancient browsers (don't), the fallback is 'gracefully degrades to sharp corners' — which won't break your layout, just make it less rounded.
The generator composes the CSS string in your browser using pure math. No uploads, no tracking, no external calls. Copy the output straight into your stylesheet. The slash-syntax output is valid CSS — not experimental, not prefixed, just the standard.
CSS border-radius supports a slash to separate horizontal radii from vertical radii — `30% 70% 70% 30% / 30% 30% 70% 70%` gives asymmetric corners that produce blob shapes. The four values before the slash set horizontal radius; the four after set vertical. Without a slash the values apply to both axes equally.
Percent is relative to the element's width/height and produces blobs and soft organic shapes. Pixels produce consistent corners regardless of element size — use px for buttons and cards, % for hero sections and decorative shapes.
Percent-based radii scale with the element. A 50% radius on a square gives a circle; the same 50% on a wide rectangle gives a pill. If you want consistency across aspect ratios, use px.
Yes — CSS border-radius is supported everywhere including IE9+. The slash syntax for asymmetric radii is widely supported across every modern browser.