CSS Border Radius Generator

Round Corners You Can Actually Reason About

Rounded corners are everywhere — buttons, cards, avatars, modals — yet hand-writing the border-radius shorthand is surprisingly error-prone. Mix up the corner order and your speech bubble points the wrong way; reach for elliptical syntax and the slash-separated values become a puzzle. This CSS border radius generator turns that into a tactile job: drag a slider per corner, watch a live box reshape in real time, and copy production-ready CSS when it looks right.

What This Tool Does

Each of the four corners gets its own slider, labelled Top Left, Top Right, Bottom Right, and Bottom Left — the exact clockwise order CSS expects. A Link All toggle ties them together so you can round every corner uniformly with one drag, then unlink to fine-tune. Switch the unit between px, %, em, and rem to match how your design system measures things. The preview sits on a colour you choose, so you can check the curve against a real background instead of a flat white card.

The Shorthand, Decoded

When all four corners share a value, the shorthand collapses to one number:

border-radius: 16px; rounds every corner by 16 pixels.

When they differ, CSS reads four values clockwise from the top-left:

border-radius: 20px 20px 20px 4px; is the classic chat-bubble — three soft corners and one sharp tail at the bottom-left.

This generator always writes the explicit four-value form, so the output is self-documenting and trivial to edit later.

A Worked Example: Building a Speech Bubble

Say you want a message bubble with a flat bottom-left tail. Unlink the corners and set Top Left, Top Right, and Bottom Right to 20px, then drag Bottom Left down to 4px. The preview instantly shows the pointed corner, and the output reads:

border-radius: 20px 20px 4px 20px;

Wait — notice the order. The bottom-left value is the fourth number, so a flat bottom-left actually produces 20px 20px 20px 4px. Seeing the live box update as you drag is exactly what stops this kind of off-by-one mistake. The built-in Speech preset loads this shape in one click if you want a starting point.

Going Elliptical for Blobs

Flip on Elliptical and every corner gains a second slider. Now each corner has a horizontal (X) and vertical (Y) radius, and the output uses the slash form:

border-radius: 64px 40px 72px 30px / 50px 70px 28px 60px;

Because X and Y differ, the corners curve unevenly, giving you the soft, organic "blob" silhouettes popular in hero sections and illustrations. The Blob preset is a ready-made example you can nudge from.

Tips for Clean Results

• Pills and circles: push all corners to a large value like 999px for a capsule, or use 50% on a square for a perfect circle. Browsers clamp the radius automatically, so you can't overshoot.
• Match your scale: if your spacing tokens are in rem, generate radii in rem too — the curve then scales with the user's root font size.
• Check contrast early: the readout shows the fill colour's RGB, HSL, and its WCAG contrast ratio against the surface, so an accessible choice is one glance away.

Pair this with the JSON formatter when you're wiring design tokens into config, or the social share preview tool to see how a rounded card reads as a link preview. Once the shape is right, copy the CSS and drop it straight into your stylesheet.