How CSS border-radius works
The border-radius property rounds the corners of a box. Each corner is a quarter of an ellipse with two radii: a horizontal one that runs along the top or bottom edge, and a vertical one that runs down the side. When both are the same, the corner is a quarter circle. The CSS Backgrounds and Borders Module Level 3 defines the shorthand like this:
- Order: the values go clockwise from the top left. With fewer than four, the missing ones copy the opposite corner: bottom left copies top right, bottom right copies top left, and top right copies top left. That is how 12px rounds all four corners and 0 50% gives a leaf.
- The slash: values before it are the horizontal radii, values after it the vertical ones. Without a slash, each corner uses the same value for both.
- Percentages: a horizontal radius in percent is measured against the width of the border box, a vertical one against its height. So 50% makes a circle from a square and an ellipse from a rectangle.
- Negative values are invalid, and 0 gives a sharp corner.
Every corner also has its own longhand property, such as border-top-left-radius, which takes one value or a horizontal and a vertical value separated by a space, without a slash. The generator writes both forms. It shortens the shorthand as far as the rules allow, so you never copy four identical values.
When rounded corners overlap
Corner curves must never overlap, so the browser checks every side of the box. For each side it adds up the two radii that meet on it and compares the sum with the length of that side. The specification puts it as a formula:
An example: a 300 × 200 px box with 150px on every corner. On the top side, 150 + 150 = 300, which fits exactly. On the left side, the same 300 px of radii meet a side only 200 px long, so f = 200 / 300 = 0.67. All eight radii are scaled by that factor and every corner is drawn at 100px. The result is a pill: two half circles joined by straight top and bottom edges.
Two things follow from this. First, the scaling is the same for all corners, so a single oversized corner also shrinks the small ones next to it. Second, very large values are a safe way to get a pill shape at any size, which is why 9999px is popular. This border radius generator shows the factor whenever it kicks in, together with the radii that are actually drawn.
px, percent or rem?
- px keeps corners the same size on every element, the usual choice for cards, buttons and inputs in a design system.
- % grows with the element, perfect for circles, ovals and organic shapes, but it gives uneven corners on boxes that are not square.
- rem follows the root font size, so the corners scale along when the base text size of the page changes. Tailwind CSS, for example, defines its default radius scale in rem. The px to rem converter turns pixel values into rem.
Switching the unit converts the values for the preview box, so the shape stays the same. When you switch to or from percent on a box that is not square, elliptical corners turn on, because percent measures the horizontal and vertical radius against different lengths.
Tips for nicer rounded corners
- Nested boxes: for an inner element that sits inside a rounded card with even padding, make the inner radius the outer radius minus the padding. Both curves then share one center and the gap looks even.
- Borders: the specification makes the inner edge of a border follow the outer radius minus the border width, so a thick border with a small radius gets a square inside corner.
- Images and overflow: backgrounds follow the curve, and content is clipped to it when overflow is not visible. Give a rounded card overflow: hidden if a photo at its top should follow the corners.
- Shadows follow the rounded shape too: the specification even grows the shadow's corner radii along with its spread. The box shadow generator has a corner slider, so you can try both together.
How to use the border radius generator
- 1Start from a shape like Pill, Circle or Blob, or with the Rounded default.
- 2Choose All the same for one radius, or Each corner to set them one by one. Turn on Elliptical corners for separate horizontal and vertical radii.
- 3Drag the dots on the edges of the preview, or use the sliders and number fields. Pick px, % or rem at the top.
- 4Set the preview box to the size of your element, then copy the CSS code, the longhand or the Tailwind class, or a link that opens this exact shape.
Frequently asked questions
What do the four values in border-radius mean?
They set the corners clockwise from the top left: top left, top right, bottom right, bottom left. Missing values copy the opposite corner, so border-radius: 10px 20px gives 10px to the top left and bottom right and 20px to the other two, and a single value rounds all four corners the same.
What does the slash in border-radius do?
It splits horizontal from vertical radii. The values before the slash set how far each curve reaches along the top or bottom edge, the values after it how far it reaches down the side. Different numbers on both sides of the slash give elliptical corners, the trick behind blob, egg and leaf shapes.
Why does 50% give an oval instead of a circle?
Because a percentage for the horizontal radius is measured against the width of the box and one for the vertical radius against its height. On a square box both come out the same and you get a circle. On a wide box, 50% horizontally is longer than 50% vertically, so the corners turn into an ellipse. Use a square box, or a fixed length in px, for a true circle.
Why does 9999px make a perfect pill?
When the radii on one side add up to more than the side is long, the browser shrinks all radii by the same factor until they fit, as the CSS Backgrounds and Borders specification requires. 9999px on every corner is far too big for any box, so it is scaled down to exactly half the height of a wide box, which gives round ends and a straight middle at any size.
Does border-radius cut off the content inside?
The background and border always follow the curve. Content such as an image only gets clipped when the element has overflow set to something other than visible, like overflow: hidden, or when the image itself has the border-radius. Text close to a corner can still poke out of a strongly rounded box, so give it some padding.
How do I use this in Tailwind CSS?
Copy the Tailwind class. When all corners match a step of the default Tailwind CSS v4 scale, like 12px for rounded-xl, you get the named class. Anything else becomes an arbitrary value, like rounded-[30%_70%_70%_30%/30%_30%_70%_70%], where underscores stand for spaces.