Border Radius Generator

What is border-radius?

border-radius is the CSS property that rounds the corners of an element's box. A single value rounds every corner equally; four values round each corner independently. It's one of the most-used properties in modern web design — pill-shaped buttons, rounded cards, circular avatars and soft-cornered modals all come down to this one declaration.

Corner order

When you specify four values, CSS always applies them in the same order, starting at the top-left corner and moving clockwise:

1. Top-left
2. Top-right
3. Bottom-right
4. Bottom-left

So border-radius: 10px 20px 30px 40px; rounds the top-left corner by 10px, the top-right by 20px, the bottom-right by 30px, and the bottom-left by 40px. This tool follows the exact same order, and its four corner sliders are labeled to match.

How to use this tool

1. Leave Same for all corners enabled and drag the Top Left slider to set one radius for the whole box — this is the common case (buttons, cards, avatars).
2. Turn Same for all corners off to reveal independent sliders for each of the four corners, and set them individually for an asymmetric shape (speech bubbles, teardrops, angled cards).
3. Pick a Unit — px for a fixed pixel radius, % for a radius relative to the element's own size (useful for perfect circles/ellipses on square boxes), or em/rem to scale with font size.
4. Copy the generated CSS from the CSS box, or download it as a .css file, and paste it into your stylesheet.

The output updates instantly as you adjust any control — there's no separate "generate" step.

Why the output is sometimes shorter than you'd expect

If all four corners end up equal, the tool emits the compact single-value form (border-radius: 20px;) instead of needlessly repeating the same value four times (border-radius: 20px 20px 20px 20px;). Both are valid CSS and render identically — the single-value form is just cleaner to read and maintain. As soon as any corner differs, all four values are written out explicitly, in the top-left → top-right → bottom-right → bottom-left order described above.

FAQ

Can I use a percentage for a perfect circle? Yes — set the unit to % and the (uniform) radius to 50% on a square element (equal width and height). That rounds all four corners into a full circle.

What's the difference between px, %, em, and rem? px is a fixed size regardless of context. % is relative to the element's own width/height, so it scales automatically if the box resizes. em is relative to the element's own font size; rem is relative to the root (html) font size, so it scales consistently with the page's base text size wherever it's used.

Does this tool support elliptical corners (separate horizontal/vertical radii)? Not currently — this tool covers the common uniform and four-corner cases. For elliptical corners, use the CSS border-radius: <horizontal values> / <vertical values> shorthand directly in your stylesheet.

Will this work in every browser? Yes. border-radius has been supported unprefixed in all major browsers for well over a decade.

Privacy

Everything happens in your browser. No CSS, values, or settings you enter are ever sent to a server — the declaration is generated and updated locally as you type.