CSS Border Radius Generator

border-radius lists corners clockwise from the top left. That is not the same starting point as margin or border-width, which start at the top edge, so a value copied between them lands on different places. Missing values copy the diagonally opposite corner.

Each corner is really a quarter of an ellipse with a horizontal and a vertical radius. Values before the slash are the horizontal radii, values after it the vertical ones, each set in the same corner order. 40px / 16px gives every corner a curve 40px across and 16px down, which reads as a flatter, stretched rounding.

If two corners on the same side ask for more than the side's length, the browser does not just clip them. It works out, for each of the four sides, the side length divided by the two radii on it, takes the smallest of those ratios, and multiplies every radius by it.

f = min(side length ÷ sum of the two radii on that side), if below 1

That is why border-radius: 9999px makes a pill. On a 200×48 button the short sides give 48 ÷ (9999 + 9999) = 0.0024, and 9999 × 0.0024 = 24px, exactly half the height, whatever the button's size.

It also explains a surprise. On a 280×160 box with the top left at 200px and the rest at 0, the left side gives 160 ÷ 200 = 0.8, so the top-left corner is drawn at 160px. Add a 100px top right and the top side gives 280 ÷ 300 = 0.93, so the 0.8 still wins and the top right is drawn at 80px, not 100px, even though it never touched anything. The tool shows these drawn values when scaling kicks in.

A percentage across is a share of the width, a percentage down a share of the height, so 50% only draws a circle on a square. For round ends on a box whose size can change, a very large pixel value is the reliable choice; for an avatar, make the element square first (aspect-ratio: 1) and then use 50%.

When a rounded box sits inside another with a gap around it, using the same radius on both makes the gap look thicker at the corners. For corners that look parallel, the inner radius should be the outer radius minus the gap:

inner radius = outer radius − padding (and border) between them
24px card, 8px padding → 16px image or button inside

If the gap is as large as the outer radius, the inner corners can be square.

border-radius rounds the element's own background and border. A child that reaches the edge, such as a full-width image at the top of a card, still has square corners and pokes out. Either give the child its own radius, or clip on the parent:

• overflow: clip cuts off anything outside the rounded shape without making the card a scroll container (Chrome 90, Firefox 81, Safari 16).
• overflow: hidden does the same in older browsers but turns the element into a scroll container, which can break position: sticky inside it.

Either way, dropdown menus, tooltips and focus outlines that extend outside the card are cut off too, so check those after adding it.

Standard rounding joins a straight edge to a circular arc, and the change of curvature at the join is visible on large radii. The newer corner-shape property, from the CSS Borders and Box Decorations Level 4 draft, keeps the same border-radius sizes but changes the curve: squircle blends smoothly into the edges (the look of app icons), bevel cuts straight across, scoop curves inwards and notch makes a square cut-out.

It shipped in Chrome and Edge 139; Firefox and Safari have it only in preview builds at the time of writing. Because browsers ignore properties they do not know, adding it is safe: everyone else gets normal rounded corners from the border-radius line.