A rounded corner in CSS is a quarter of an ellipse, and every corner has two radii: one horizontal, one vertical. border-radius: 24px sets all eight of them at once, which is why the property feels like a single knob. The longer forms let them come apart — up to four corners listed clockwise from the top left, and a slash separating the horizontal set from the vertical set. That is the entire model. What is left is shorthand rules and one clamping behaviour that catches everybody at least once.
What the four values mean
Corners are listed clockwise starting at the top left: top-left, top-right, bottom-right, bottom-left. Same direction as margin and padding, different starting edge — those start at the top side, this starts at a corner.
Shorter lists mirror rather than repeat, and the two-value form is the one that trips people up:
- One value — all four corners.
- Two values — the first is top-left and bottom-right, the second is top-right and bottom-left. Those are the diagonals. If you were expecting "top pair, bottom pair", you will build the wrong shape and stare at it for a while.
- Three values — top-left, then the other diagonal (top-right and bottom-left) together, then bottom-right.
- Four values — one each, clockwise.
Each corner also has its own longhand — border-top-left-radius and its three siblings. Use those when you want to change one corner without restating the other three.
What the slash does
The slash splits horizontal radii from vertical ones. border-radius: 60px / 20px gives four corners that reach 60 px sideways and only 20 px up or down: wide, shallow curves, the shape you get on a stretched pill. Everything before the slash is horizontal, everything after is vertical, and each side of the slash follows the same one-to-four-value mirroring rules as above.
That is where the eight radii come from: four corners times two axes. Written out in full, border-radius: 40px 20px 60px 10px / 10px 60px 20px 40px is legal and completely unreadable.
Nobody writes these by hand. That is the honest case for a border-radius generator with a live preview: switch on elliptical corners, drag the eight sliders, copy the line. It collapses each set of four values to the shortest form that still means the same thing, so the output is tidier than what you would have typed. It has two limits worth knowing first. The sliders stop at 100, so the huge-value pill trick below is one you type yourself. And it writes the shorthand only — no per-corner longhands, and no logical properties like border-start-start-radius, which is what you need if your layout flips for right-to-left languages.
The per-corner longhands take both radii too, but with a space instead of a slash: border-top-left-radius: 40px 20px means 40 px horizontal, 20 px vertical. The slash only exists in the shorthand, because the shorthand needs a way to tell two groups of four apart.
px, rem or percent?
A radius in px stays put. In rem it scales with the root font size, so a 0.25rem corner is 4 px at the default 16 px root and 6 px for a reader who has raised it to 24. Whether that is an improvement depends on the radius: invisible at 4 px, plainly visible on a 24 px card. The same trade-off runs through choosing between px, rem and em elsewhere in your CSS.
Percentages are the interesting case, because a single number resolves against two different lengths. The horizontal radius is measured against the element's width, the vertical one against its height. On a 400 by 100 box, border-radius: 20% produces an 80 px horizontal radius and a 20 px vertical one. It is not a round corner; it is a stretched one, and it changes shape every time the box does.
This is also why 50% gives a perfect circle on a square and an ellipse on everything else. If you want a pill — a fully rounded rectangle whose straight middle section stays straight — percentages are the wrong tool. Use an absurd pixel value instead, and let the clamping rule below do the work.
Why a corner came out smaller than the number you set
Set border-radius: 200px on a 200 by 60 box and you will not get 200 px corners. You will get 30 px corners. The browser does not clip each radius on its own; it rescales all of them together.
The rule, from the CSS Backgrounds and Borders spec: for every side of the box, divide the side's length by the sum of the two radii touching it. Take the smallest of those four ratios. If it is less than 1, multiply every radius on the element by that factor.
Two consequences worth keeping in your head. First, one oversized corner quietly shrinks the other three in proportion — you widen the top-left slider and the bottom-right curve gets flatter, without you touching it. Second, an enormous value can never overflow or break: border-radius: 9999px on that 200 by 60 box scales down to exactly 30 px on all four corners, which is half the short side, which is a perfect pill. That is the whole trick behind the 9999px you see in other people's stylesheets. It is not a magic number, it is just big enough that the clamp always fires.
You can see it without opening dev tools. Put border-radius: 100px on a 320 by 170 box and the corners come out at 85 px — half the height — because the two radii stacked on each short side wanted 200 px and only 170 was available. Make the box 201 px tall and the same declaration finally gives you the 100 px you asked for. Nothing in the CSS changed.
Rounding a box does not round what is inside it
The radius clips the element's own background and border. It does not clip its children. Put a square image inside a rounded card and the image corners poke straight through — a common reason people decide border-radius is not working.
Two fixes, both with a cost. Give the image the same radius, which is fine until the card has padding and the curves no longer line up. Or put overflow: hidden on the parent, which clips everything but turns the card into a scroll container — that breaks position: sticky inside it and can cut off a dropdown meant to escape the box.
Some things follow the curve for free. A box-shadow traces the rounded outline automatically rather than drawing a rectangle behind it, and current browsers curve the focus outline to match as well.
The inside of a card is not the same radius as the outside
Nest a rounded element inside another rounded element, give them the same radius, and the result looks slightly wrong in a way most people cannot name. The two curves are not concentric.
The fix is arithmetic: inner radius = outer radius − padding. A card with a 16 px radius and 12 px of padding wants about 4 px on the element inside it. If the padding is larger than the radius, the inner element should be square.
Browsers already do this for borders. The inner curve, where the padding box starts, is the outer radius minus the border width, floored at zero — so a 6 px radius with an 8 px border gives a sharp inner corner and a rounded outer one. It just does not happen across separate elements, because the browser has no idea they were meant to look related.
What border-radius cannot do
It cannot make a squircle. The rounded rectangles on an iPhone home screen are superellipses: the curvature eases in gradually, so there is no visible moment where the straight edge becomes the curve. A CSS corner is an elliptical arc, and an arc meets the straight edge with an abrupt change in curvature. No combination of the eight radii reproduces the softer shape. For that you need a clip-path with a path, an SVG mask, or the newer corner-shape property as support for it spreads.
It also does nothing on a table using border-collapse: collapse. The spec excludes that case outright, so if you need rounded table corners, switch to border-collapse: separate and round the individual corner cells, or wrap the table in a rounded container.
And it carries very little meaning on its own. Two cards at 8 px and 12 px do not read as different levels of importance. Depth comes from elevation, and how box-shadow builds that sense of layering is the other half of making a card look like a card.
Eight radii is more than anyone can hold in their head, so the fastest way to land on the shape you want is to drag the sliders on the border-radius generator and copy the line it writes. Its random blob button is worth a click as well: switching every corner to an independent percentage is the quickest way to feel how far the eight values can pull a rectangle out of shape.
Rounded corners are half of what makes an element read as a raised surface. The other half is the shadow, and getting that one wrong is more obvious — how CSS box-shadow actually works covers spread, blur and why a single hard shadow always looks cheap.
Frequently asked questions
How does border-radius work in CSS?
Each corner is drawn as a quarter of an ellipse with a horizontal radius and a vertical radius. A single value sets all eight of those radii, so every corner becomes a quarter circle. Listing more values assigns them to specific corners, clockwise from the top left.
How do I make a pill shape with border-radius?
Set a pixel value far larger than the element, such as border-radius: 9999px. The browser scales every radius down until they fit, which lands on exactly half the shortest side and gives a fully rounded end. Percentages do not work here, because 50% curves the straight middle section into an ellipse.
Can I round only one corner?
Yes. Use the longhand for that corner, such as border-bottom-right-radius: 12px, or write four shorthand values with zeros in the other three positions. The longhand is safer inside a component, since it will not wipe out a radius set elsewhere in the cascade.
Why is my border-radius not working?
The three usual causes are a child element that is not being clipped, a table with border-collapse set to collapse, and radii that were scaled down because they did not fit the box. A square image inside a rounded card needs overflow: hidden on the parent or the same radius on the image itself.
Should I use pixels or percentages for border-radius?
Pixels for almost everything, because the corner then looks the same whatever size the element ends up. Percentages resolve against width horizontally and height vertically, so the same number produces a stretched corner on any box that is not square. Reach for 50% when you specifically want a circle or an ellipse.
Last updated September 19, 2026