Border Radius Generator

Drag the sliders to shape each corner of the preview box and copy the resulting border-radius CSS. Lock all four corners together for a simple rounded rectangle, or unlock them to build pill shapes, leaf shapes and asymmetric blobs.

What Is This Tool?

border-radius is the CSS property that rounds the corners of an element. Written by hand it takes four values in a fixed order — top-left, top-right, bottom-right, bottom-left — which is easy to get backwards, especially once the four corners differ.

This tool removes the guesswork: move a slider, watch the corner round in the live preview, and read the exact CSS off the generated code box. A single lock toggle switches between a uniform radius (all four corners the same, the most common case) and four independent sliders for organic, asymmetric shapes.

Why Use It?

Live preview updates instantly as you drag — no editing CSS and refreshing to see the result.
One-click lock for the common 'same radius on every corner' case; unlock for pill buttons, speech bubbles and blob shapes.
Outputs the shorthand single-value form when all corners match, or the full four-value form when they don't — copy-paste ready either way.
Runs entirely in your browser. Nothing you enter is sent anywhere.
Free, no signup, works on mobile.

How to Use

Leave 'lock all corners' checked and drag any slider to set one uniform radius for the whole box.
Uncheck the lock to control each corner independently — useful for pill shapes, teardrops and asymmetric cards.
Watch the preview box update live as you adjust each slider.
Copy the generated CSS from the code box and paste it into your stylesheet.

Example

Input

Top-left: 40px, Top-right: 8px, Bottom-right: 40px, Bottom-left: 8px

Output

border-radius: 40px 8px 40px 8px;

Mismatched opposite corners like this create a leaf or petal silhouette — a common effect in card and badge design.

px or % — which unit should I use?

This generator outputs pixel values, which is the right default for most UI work: buttons, cards and inputs where you want a fixed, predictable corner radius regardless of the element's size.

Percentages behave differently — they're relative to the element's own width and height, so a 50% radius on a square element produces a perfect circle, and on a non-square element produces an ellipse. If you want that effect (avatars, blob shapes that scale with the container), take the generated CSS and swap the px values for a % value by hand — for example border-radius: 50% turns any square box into a circle.

Common border-radius patterns

Rounded card: all corners equal, roughly 8–16px for UI components.
Pill button: set the radius to half the element's height (or just use 9999px, which clamps to a full pill regardless of height).
Circle avatar: border-radius: 50% on a square (equal width and height) element.
Speech bubble: three corners rounded, one corner sharp — set three sliders high and one to 0.
Leaf / petal shape: opposite corners matched, adjacent corners different — e.g. top-left and bottom-right both large, top-right and bottom-left both small.

Pairing with a shadow

Rounded corners rarely appear alone — cards and buttons usually need a bit of shadow for depth too. Use the Box Shadow Generator to dial in a drop shadow and apply both pieces of generated CSS to the same element.

→ Box Shadow Generator · Unit Converter

Frequently Asked Questions

What's the difference between border-radius and the corner order?

The CSS shorthand always follows top-left, top-right, bottom-right, bottom-left in that order, clockwise starting from the top-left. This tool's four sliders are labeled to match, so you never have to remember the order yourself.

Can I use different units for each corner?

Yes, in real CSS you can mix px, %, em and rem across corners, though it's rare in practice. This tool generates uniform px values for simplicity — swap any individual value to % or another unit directly in your stylesheet if you need mixed units.

Why does border-radius: 50% sometimes make an oval instead of a circle?

Because percentages are relative to each axis independently — the horizontal radius is a percentage of the element's width, the vertical radius a percentage of its height. On a square element (equal width and height) that produces a perfect circle; on a rectangle it produces an ellipse.

Does border-radius work on background images and borders too?

Yes — border-radius clips the element's background, border, and (in modern browsers) its box-shadow to the rounded shape. It does not clip child content that overflows unless you also set overflow: hidden on the parent.

Is there a limit to how large the radius can be?

No hard limit — if the radius exceeds half the element's width or height, browsers clamp it so the two curves on that side meet exactly in the middle, which is how a square becomes a perfect circle or a pill shape.