Border-Radius Playground

The Border-Radius Playground lets you shape each corner of an element independently — dragging or adjusting each corner’s radius on a live preview — and copy the resulting border-radius CSS once it looks right, instead of guessing at four numbers and reloading a browser tab repeatedly to check.

Border-radius looks like a simple property until you’re trying to get an organic, slightly irregular shape — a blob, an asymmetric card corner, a speech-bubble-style rounded rectangle — rather than a plain uniform rounded box. The full CSS shorthand supports independent horizontal and vertical radii per corner, which is powerful but genuinely difficult to reason about by typing raw numbers, since you’re mentally modeling eight separate values (two per corner) without seeing the result until you check it in a browser.

To use it, adjust each corner using the visual controls while watching a live preview update in real time. Once the shape looks the way you want, the tool generates the exact border-radius CSS value needed to reproduce it — copy it directly into your stylesheet. There’s no guessing and no round-tripping between your editor and browser to check whether a number was right.

This pairs naturally with the Clip-Path Shape Generator if border-radius alone isn’t giving you the exact shape you’re after — clip-path can create shapes border-radius fundamentally can’t (non-rectangular polygons, for instance), while border-radius stays the better choice for genuinely rounded-corner shapes since it preserves box-shadow and other rectangular-box behaviors that clip-path clips away.

FAQ

Can I create asymmetric or blob-like shapes, not just uniform rounded corners?

Yes — that’s the main reason to reach for a visual tool instead of typing border-radius by hand. Each corner can have independent horizontal and vertical radius values, which is what makes organic, non-uniform shapes possible.

Does this generate a single border-radius value, or separate values per corner?

It generates whichever form is needed to reproduce the shape you built — a single value if all corners match, or the full multi-value shorthand if corners differ, following standard CSS border-radius syntax.

Will the generated CSS work the same across all browsers?

Border-radius has very strong, consistent support across all modern browsers, so the generated CSS should render the same way everywhere without needing vendor prefixes or fallbacks.

Can I use this for buttons and cards, or is it only useful for decorative shapes?

Both — the same visual tool works whether you’re fine-tuning a subtle rounded-corner button or building a more dramatic organic shape; the underlying CSS property is the same either way.