Border radius generator
Generated in your browser · nothing is uploaded
Sets each corner radius independently and writes the shortest shorthand that means it: four equal corners collapse to one value, a diagonal pair to two, and so on.
How to use the border radius generator
The shorthand runs clockwise from the top left, so top-left, top-right, bottom-right, bottom-left, and it fills in missing values the way margin does. One value applies to all four corners. Two values set the two diagonals, the first for top-left and bottom-right and the second for the other pair. Three values give top-left, then the top-right and bottom-left pair, then bottom-right. That last case is the one people misread: border-radius: 8px 2px 0px means an 8px top-left corner, 2px on both of the other diagonal corners, and a square bottom-right. Watching the value here collapse as you move the sliders is a quicker way to learn the rule than reading it.
Percentages behave differently from pixels in a way that surprises almost everyone the first time. A percentage radius resolves against the element’s own width and height separately, so on a rectangle the corner it draws is elliptical rather than circular. border-radius: 50% on a square gives a circle; on a 200 × 100 box it gives an oval. That is deliberate, and it is how an ellipse gets drawn in CSS with no SVG involved. It also explains why a percentage radius that looked right on one card looks wrong on a wider one, and why fixed units are the safer default for anything that has to look consistent across differently shaped elements.
The pill trick works because of a clamping rule rather than a special case. Ask for a 999px radius on a 40px-tall button and the browser does not simply refuse: the specification says that when the radii along any edge add up to more than that edge’s length, every radius on the box is scaled down by one common factor, the smallest ratio needed to make them all fit. So a huge value collapses proportionally to exactly half the shorter dimension, giving a perfect pill on any height without you knowing the height. That same rule is what stops a large radius from overlapping itself on a small box. Behind all of this the browser is really storing two radii per corner, one horizontal and one vertical, which is the slash form: border-radius: 20px / 40px, or the full a b c d / e f g h. This generator emits the single-radius form, so genuinely elliptical corners are something to write by hand.
What people use it for
- Working out which corner a value in an existing shorthand applies to
- Rounding the top two corners of a sheet or a tab and leaving the rest square
- Drawing an ellipse in CSS without reaching for SVG
- Getting a pill shape on a button whose height you do not control
- Collapsing four corner values to the shortest form that still means them
- Checking a radius reads correctly in rem when the page is zoomed
Questions
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left, with the same fill-in rules as margin.
Top-left, then both of the other diagonal corners together, then bottom-right. So 8px 2px 0px is 8 at the top left, 2 at top-right and bottom-left, and a square bottom-right corner.
Because a percentage resolves against width and height separately, so on a rectangle the corner is elliptical by definition. On a square the two resolve to the same number and you get a circle.
Give it a radius larger than half the height, such as 999px. The browser scales every radius down by a common factor until they fit, which lands exactly on a pill whatever the height turns out to be.
It sets the horizontal and vertical radius of each corner separately, for corners that are genuinely elliptical rather than circular. The full form takes eight values, four on each side of the slash.
It clips backgrounds and borders always, and content only with overflow: hidden or clip. Without that, a child element happily paints across the rounded corner.
px for a fixed detail, rem when the radius should grow with the reader’s text size, and per cent only when you actually want the corner to follow the element’s proportions.
The value describes the outer edge of the border box. The browser derives the inner curves for the padding and content boxes from it, which is why a thick border produces a visibly tighter curve on its inside.
A table needs border-collapse: separate for corner radii to apply. With collapsed borders the cells share edges and there is no separate box to round.