About the CSS Border Radius Generator
The CSS border-radius property can accept up to eight different values (two per corner, for horizontal and vertical radius) to create everything from simple rounded rectangles to organic, blob-like shapes — but remembering the correct value order and syntax for asymmetric corners is genuinely confusing without a visual reference. This generator lets you adjust each corner independently with live sliders and copy the resulting CSS.
This tool is useful for front-end developers creating custom card or button shapes, designers experimenting with organic blob shapes for decorative background elements, and anyone wanting precise, asymmetric rounded corners without manually calculating the correct CSS shorthand syntax.
To use it, adjust each of the four corners independently using sliders (or use the "all corners" quick control for a uniform simple rounded rectangle). A live preview box updates instantly, and the exact CSS border-radius value — correctly formatted whether it's a simple single value or a complex eight-value asymmetric shape — is generated and ready to copy.
For example, setting all four corners to 50% produces a perfect circle (assuming a square element), while setting dramatically different values for each corner — like 60% 40% 30% 70% — produces the kind of soft, organic "blob" shape commonly used as a decorative background element behind hero images or illustrations in modern web design.
A common mistake is assuming border-radius always takes a single simple value — while that's the most common use case, understanding that each corner can be controlled independently (and even with different horizontal/vertical radii for elliptical corners) unlocks much more creative and precise shape possibilities than most developers realize is possible with pure CSS. Another frequent issue is applying a large border-radius to a very small element, which can produce an unexpected shape since the radius is capped by the element's actual dimensions — always preview the actual result on your real element size rather than assuming a percentage value will always look the same on elements of different sizes.
Tip: organic blob shapes work particularly well as blurred, low-opacity decorative background elements behind text or images — combine this tool's output with the CSS Gradient Generator and a bit of blur to create modern, soft background accents popular in current web design trends.