Fancy Border Radius

Eight handles. One organic shape. Live CSS, ready to paste.

What is this fancy border-radius generator?

This free fancy border-radius generator turns the eight-value CSS border-radius syntax into a tactile, eight-handle playground — drag any handle and the shape morphs in real time while ready-to-paste CSS updates beside it, all entirely in your browser.

How do I make an organic blob shape in pure CSS?

Drag the eight perimeter handles to set independent horizontal and vertical radii for each corner. The preview morphs live and the generated border-radius declaration appears beside it, ready to copy into your stylesheet.

Key features

Eight live handles
Two sliders on every side of the stage drive the four horizontal and four vertical radii independently — the same control surface designers reach for to craft blob, leaf and pebble shapes.
Production-ready CSS
The output uses the W3C eight-value border-radius shorthand, supported in every modern browser, with a one-click copy button and a Tailwind-friendly arbitrary-value variant.
Percentage or pixel units
Switch between percent units for responsive shapes that scale with their container, and pixel units for pixel-perfect components.
Curated presets and randomize
Jump-start with hand-picked presets — blob, leaf, cookie, organic — or hit Randomize for fresh inspiration on every click.

How to use it

Drag any of the eight handles arranged around the preview to sculpt each corner; the shape and the CSS update together. Adjust the width, height and colour to mimic your component, then press Copy CSS to grab the snippet, or Copy Tailwind for an arbitrary-value class you can drop into your markup.

Frequently asked questions

How does the eight-value border-radius syntax work?

The shorthand sets four horizontal radii (top-left, top-right, bottom-right, bottom-left) and four vertical radii in the same order, separated by a slash — producing an elliptical curve at every corner, which is what makes organic blob shapes possible.

Are the generated shapes responsive?

Yes — when you use percent units the radii scale fluidly with the element's box, so a single rule keeps its silhouette across breakpoints.

Can I use this for production code?

Absolutely. The eight-value border-radius syntax is part of CSS Backgrounds and Borders Module Level 3 and is supported in every evergreen browser, including iOS Safari and Android Chrome.

Built by the Toolbox team against the W3C CSS Backgrounds and Borders Module Level 3 specification, with eight-value radii rendered live so what you see in the preview is exactly what the browser paints from the generated declaration.