CSS Border Radius Generator

Every corner is a quarter of an ellipse

A rounded corner in CSS is a quarter ellipse with a horizontal radius and a vertical radius. Give one number and both radii match, so the corner is a quarter circle. Give the slash form and they separate: border-radius: 60px / 20px makes corners that are wide and shallow, the shape you see on a stretched pill. Everything before the slash is horizontal, everything after is vertical.

The order, and the values you leave out

Corners are listed clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Shorter lists mirror rather than repeat:

• One value — all four corners.
• Two values — the first is top-left and bottom-right, the second is top-right and bottom-left. The diagonals, not the pairs you might expect.
• Three values — top-left, then top-right and bottom-left together, then bottom-right.
• Four values — one each, clockwise.

The tool above always writes the shortest form that means what you built, which is why the output sometimes has fewer numbers than you have sliders.

Percentages resolve against two different lengths

A horizontal radius in percent is measured against the box's width. A vertical radius in percent is measured against its height. On a 400 by 100 box, border-radius: 20% gives an 80 pixel horizontal radius and a 20 pixel vertical one — a stretched corner, not a round one. This is also why 50% produces a perfect circle on a square and an ellipse on anything else. Switch the preview box above from square to wide and watch a percentage value change shape while the number stays still.

The scaling rule nobody documents well

What happens when the radii on one side add up to more than that side is long? The browser does not clip them individually. It computes, for every side, the ratio of the side length to the sum of its two radii, takes the smallest of those ratios, and if it is below 1 it multiplies every radius on the box by that factor.

The consequence is worth knowing: one oversized corner quietly shrinks all the others, in proportion. It also means border-radius: 50% can never break, and that pushing a slider above to its maximum sometimes makes a different corner look smaller even though you did not touch it.

Borders, padding and concentric corners

The radius applies to the border box. The inner curve, where the padding box begins, has a radius of the outer radius minus the border width, floored at zero. That happens automatically for borders. It does not happen for nested elements: a card with 16px radius and 12px padding needs its inner element set to about 4px, not 16px, for the two curves to look concentric. Matching the numbers is the usual mistake and it reads as slightly wrong without anyone being able to say why.

Rounding also clips the background and the border, but not the content. An image or a child element with square corners will poke straight through unless you add overflow: hidden to the parent — which comes with side effects, since it creates a scroll container and breaks position: sticky for anything inside.

These are not squircles

CSS corners are elliptical arcs, and an arc meets the straight edge with an abrupt change in curvature. The rounded squares on an iPhone home screen are superellipses, where the curvature eases in continuously, which is why they look softer at the same visual radius. No combination of the eight radii here reproduces that. For a true squircle you need a clip-path with a path, an SVG mask, or the corner-shape property as browser support for it arrives.

Where this tool stops

It writes the shorthand only. It does not emit the per-corner longhands like border-top-left-radius, and it does not emit the logical versions such as border-start-start-radius, which are what you want if your layout flips for right-to-left languages. The blob shapes are still made of ellipse arcs, so they read as CSS blobs rather than hand-drawn ones. And anything you build in percentages will change shape whenever the element does — the three preview sizes hint at that, but only your own layout will tell you for certain.

Frequently asked questions

How do I make a circle with border-radius?

Set border-radius: 50% on an element with equal width and height. On a rectangle the same value gives an ellipse, because the horizontal radius is measured against the width and the vertical one against the height.

What does the slash in border-radius mean?

It separates horizontal radii from vertical ones. The values before the slash set how far each corner curve extends sideways, the values after set how far it extends up or down. Without a slash, both are the same and every corner is a quarter circle.

Why does one corner look smaller than the value I set?

Because the radii on a side added up to more than the side length. When that happens the browser scales every radius on the box by the same factor until they fit, so an oversized corner shrinks the others along with itself.

What radius should the inside of a rounded card have?

The outer radius minus the padding. A 16px outer radius with 12px of padding wants about 4px inside. Reusing the same number on the nested element makes the curves non-concentric, which looks subtly off even when nobody can name the reason.

Why does the image inside my rounded box have square corners?

border-radius clips the background and the border of the element, not its children. Add overflow: hidden to the parent, or give the image the same radius. Note that overflow: hidden creates a scroll container and stops position: sticky working inside it.

Last updated September 19, 2026