Border radius generator

border-radius: 24px 24px 8px;

rounded-3xl rounded-br-lg

How the border-radius shorthand works

• Four values go clockwise from the top left: border-radius: 4px 8px 16px 32px is top left, top right, bottom right, bottom left.
• Leave values off and they copy the opposite corner. With three values the bottom left copies the top right; with two, the bottom right copies the top left too; one value sets every corner. This page always writes the shortest form that means the same thing — switch to Longhand to see all four corners spelled out.
• A slash adds vertical radii. Values before the / are horizontal, values after it vertical: border-radius: 40px / 20px gives every corner an ellipse 40px wide and 20px tall. Tick Separate vertical radius to set them.
• Percentages are of the box's own size — horizontal radii of its width, vertical radii of its height. So 50% makes a circle only on a square; on a wider box it makes an ellipse.

When the corners don't fit

If the two radii along any side add up to more than that side is long, the browser shrinks every radius by the same factor until the tightest side fits. Put 80px on every corner of a 200 × 100px box: the top needs 160px of its 200px and fits, but the left side needs 160px of its 100px, so all four radii are multiplied by 0.625 and drawn at 50px — the box becomes a pill. That is why border-radius: 9999px makes a pill at any size: on the 280 × 72px Pill preset every corner is drawn at 36px, half the height. When this happens the tool tells you the radii the browser really draws.

How we test it

For 497 different shapes and box sizes, the CSS is pasted exactly as you would copy it into Chrome. The four corner radii Chrome computes (1,988 in all) must equal what you set — for the short form, the longhands and the preview on this page alike — and the Tailwind classes, compiled with Tailwind CSS 4.3.3, must compute the same radii. The shrink-to-fit rule above is checked against what Chrome actually draws: 430,727 points around the corners are tested to see whether they fall inside the rounded box, and every answer must match the radii this page reports.

Questions

How do I make a circle with CSS?

Give a square element border-radius: 50% — try the Circle preset. On an element that isn't square the same value makes an ellipse.

Pill shape: 9999px or 50%?

9999px. Because over-large radii are scaled down until they fit, a huge radius always ends up as half the shorter side — perfect semicircle ends at any width. 50% instead gives elliptical ends on a wide box.

Why does my image or child poke out of the rounded corners?

border-radius rounds the element's own background and border, but its children are only clipped to the curve when the element also has overflow: hidden (or overflow: clip). An <img> given the radius directly is clipped by itself.

Can border-radius make a ticket or a notch?

No — it only bends corners outward. Inward notches, like the bites in a ticket stub, need a mask or a clip-path; the clip-path generator cuts arbitrary shapes.

Which Tailwind classes does it give?

Tailwind CSS v4. When every corner is on Tailwind's radius scale you get named classes, as few as possible — rounded-xl, rounded-t-xl rounded-b-none. The scale, read from the tailwindcss package, is rounded-xs = 2px, rounded-sm = 4px, rounded-md = 6px, rounded-lg = 8px, rounded-xl = 12px, rounded-2xl = 16px, rounded-3xl = 24px, rounded-4xl = 32px (at the default 16px root size, since the scale is in rem), plus rounded-none = 0. Any other value, a percentage or an elliptical corner becomes one arbitrary class holding the CSS, such as rounded-[30%_70%_70%_30%_/_30%_30%_70%_70%]. Tailwind's own rounded-full is calc(infinity * 1px), which looks the same as 9999px.

Lay the box out with the flexbox generator or the CSS grid generator, or turn existing CSS into classes with the CSS to Tailwind converter.