border-radius is one of the first CSS properties most people learn and one of the last they fully understand. Rounding all four corners of a card by 12 pixels is easy. Then a button needs to be a pill at any width, an avatar needs to be a circle, a chat bubble needs one sharp corner, and suddenly the shorthand order, the difference between 50% and 999px, and a radius that "stops growing" all matter.
This guide explains how the property works from the specification up: what each value count means, how percentages differ from pixels, how browsers scale radii that are too large, how to build common shapes, and why rounded corners sometimes fail to appear. The examples are checked against the CSS Border Radius Generator, which previews each corner live and outputs the shortest valid shorthand. It is one of the CSS tools on Toolz.
TL;DR:
border-radiusrounds an element's corners. One value sets all four corners, two values set the top-left/bottom-right and top-right/bottom-left pairs, three values set top-left, then top-right and bottom-left together, then bottom-right, and four values run clockwise from top-left. Pixel radii are fixed curves; percentages are measured against width and height separately, so50%makes a circle only on a square. When radii along a side add up to more than the side, the browser scales every radius down proportionally. The border radius generator handles the shorthand for you, client-side, free, no signup.
What does the CSS border-radius property do?
The border-radius property rounds the outer corners of an element's border box. Each corner becomes a quarter of an ellipse with a horizontal radius and a vertical radius. When both radii are equal, the corner is a quarter circle.
It is defined in the W3C CSS Backgrounds and Borders Module Level 3, and has been supported unprefixed in every major browser for over a decade, so no vendor prefixes are needed.
The rounding affects more than the border line. The element's background is clipped to the rounded shape, box-shadow follows the curve, and in modern browsers so does outline. Content inside the element is not clipped unless you add overflow: hidden, which is the most common reason rounded corners appear to fail.
How does the border-radius shorthand work?
border-radius is a shorthand for four longhand properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius. The number of values you give decides which corners each value applies to.
| Values | Example | Top-left | Top-right | Bottom-right | Bottom-left |
|---|---|---|---|---|---|
| 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
The pattern is the same clockwise order used by margin and padding, starting from the top-left corner instead of the top side. Missing values are filled from their diagonal partner: with two values, bottom-right copies top-left and bottom-left copies top-right. With three, bottom-left copies top-right.
The generator reverses this process. You set each corner with its own slider, and it writes the fewest values that produce the same shape:
- All four corners equal gives one value.
- Top-left equal to bottom-right, and top-right equal to bottom-left, gives two values.
- Top-right equal to bottom-left (but the other diagonal differs) gives three values.
- Anything else gives four.
One consequence surprises people. Round only the top-left corner by 20px and the output is border-radius: 20px 0px 0px;, not the four-value 20px 0px 0px 0px. Both are correct; the three-value form is shorter because top-right and bottom-left are both zero. Every value keeps its unit, so a zero corner prints as 0px.
What is the difference between px and % for border-radius?
A pixel radius is an absolute size. A percentage radius is relative to the element's size, and the horizontal and vertical parts are measured separately: the horizontal radius against the width, the vertical radius against the height.
On a square, those are the same number. On a rectangle, they are not, which is why 50% turns a square into a circle but a rectangle into an ellipse.
Take the generator's preview box, which is 224px wide and 160px tall:
| Value | Horizontal radius | Vertical radius | Shape |
|---|---|---|---|
16px |
16px | 16px | Rounded rectangle, circular corners |
50% |
112px (50% of 224) | 80px (50% of 160) | Ellipse |
25% |
56px | 40px | Rounded rectangle, elliptical corners |
999px |
999px, scaled to 80px | 999px, scaled to 80px | Pill with round ends |
The other two units behave like pixels once resolved. em is relative to the element's own font size and rem to the root font size, so 1rem is 16px with default browser settings. Using em or rem lets corners scale with text size, which suits buttons and tags that grow with their label.
In the generator, sliders run from 0 to 200 for px, 0 to 50 for %, and 0 to 10 for em and rem, in whole-number steps. Switching the unit keeps the numbers and swaps the unit, so 16px becomes 16%, not a converted value.
Why does a large border-radius stop getting rounder?
Because the specification does not allow corner curves to overlap. When the radii on one side add up to more than that side's length, the browser shrinks every radius on the element by the same factor until they fit.
The corner overlap rule works like this. For each of the four sides, divide the side's length by the sum of the two radii that touch it. Take the smallest of those ratios, call it f. If f is less than 1, multiply every radius by f.
Here is the calculation for border-radius: 999px on the 224 by 160 preview box:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
Each corner ends up with an 80px radius, exactly half the 160px height, so the short ends become perfect semicircles. The same thing happens at 200px, the top of the pixel slider: f is 160 / 400 = 0.4, and 200 × 0.4 is 80px again. Past half the shorter side, a pixel radius stops changing anything.
Two practical results follow. A pill button can use any very large pixel value, and it stays a pill at any width. And because scaling is proportional across all four corners, a single oversized corner also shrinks the others. Set top-left to 999px and leave the rest at 20px, and the 20px corners get scaled down with it.
How do you make common shapes with border-radius?
Most rounded shapes in interfaces come from a handful of recipes. The generator has presets for the common ones.
| Shape | CSS | Notes |
|---|---|---|
| Sharp | border-radius: 0px; |
The default for most elements |
| Subtle | border-radius: 6px; |
Inputs, small buttons |
| Card | border-radius: 12px; |
Panels and cards |
| Rounded | border-radius: 16px; |
The generator's starting value |
| Pill | border-radius: 999px; |
Works at any width via overlap scaling |
| Circle | border-radius: 50%; |
Needs equal width and height |
| Leaf | border-radius: 0px 24px; |
Two opposite corners rounded |
| Blob | border-radius: 60% 40%; |
Organic shape from unequal percentages |
| Speech bubble | border-radius: 16px 16px 16px 0px; |
One sharp corner near the speaker |
| Tab | border-radius: 8px 8px 0px 0px; |
Rounded top, flat bottom |
Circle. Set 50% on an element with equal width and height. For avatars, add aspect-ratio: 1 and object-fit: cover on the image so a non-square photo does not stretch into an ellipse.
Pill. Use a large pixel value rather than 50%. On a wide button, 50% produces an ellipse with pointed-looking ends, because the horizontal radius is half the width. 999px gets scaled to half the height instead, giving round ends.
Blob. The preset 60% 40% sets top-left and bottom-right to 60% and the other two to 40%. On the preview box, the horizontal radii along the top edge are 134.4px and 89.6px, which add up to exactly 224px, so no scaling occurs and the two curves meet with no straight edge left between them. Presets can go past the slider range: Blob uses 60%, Pill uses 999px, and the output keeps those values until you move a slider.
Speech bubble and tab. Neither shape has a matching diagonal pair, so both need all four values. Set the corners individually in the generator and it confirms that no shorter form exists.
What is the slash syntax in border-radius?
A slash separates horizontal radii from vertical radii, so each corner can be a non-circular ellipse with sizes you choose directly.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
The values on each side of the slash follow the same one-to-four rules as the normal shorthand. The Toolz generator does not write slash syntax: it sets one radius per corner, which covers circles, pills, cards and blobs. For egg shapes and custom lens forms, start from the generator's output and add the slash part by hand.
Why are my rounded corners not showing?
When border-radius seems to do nothing, the cause is almost always one of these.
| Symptom | Cause | Fix |
|---|---|---|
| Image or child pokes out of the corners | Children are not clipped by default | Add overflow: hidden to the rounded parent, or round the child too |
| No visible change at all | Element has no background, border or shadow | Give it a background color or border so the shape is visible |
| Table corners stay square | border-collapse: collapse on the table |
Use border-collapse: separate with border-spacing: 0, or round a wrapper |
| Circle looks like an oval | Width and height differ | Set equal dimensions or aspect-ratio: 1 |
| Pill has pointed ends | Using 50% on a wide element |
Use a large px value like 999px |
| Radius stops increasing | Overlap scaling | Expected; radius is capped at half the shorter side |
| Inner element corners look thicker | Inner radius equals outer radius inside padding | Set inner radius to outer radius minus the padding |
The last one is subtle. A card with border-radius: 16px and padding: 8px containing an image with the same 16px radius looks uneven, because the inner curve should be tighter. The inner radius that follows the outer curve is 16 minus 8, so 8px.
How does border-radius combine with shadows and gradients?
Rounded corners rarely ship alone. A card usually has a shadow and often a gradient background, and both follow the rounded shape automatically.
box-shadow traces the rounded border box, so a soft shadow under a 12px card has 12px-rounded corners without any extra work. The box shadow generator previews shadows on a rounded element, and the box shadow guide explains the offset, blur and spread values behind them.
Backgrounds, including gradients, are clipped to the rounded shape as well. To design the fill, use the CSS gradient generator; the CSS gradient guide walks through the syntax. If the corner size should scale with the viewport rather than stay fixed, the CSS clamp generator builds a clamp() value you can use as the radius, for example a card that is 8px on phones and 20px on wide screens.
Using the generator, step by step
- Pick a preset such as Card, Pill, Circle or Blob, or start from the default 16px corners.
- Adjust corners. The corner toggle defaults to Independent, where each slider moves only its own corner. Switch it to Linked to move all four together.
- Choose a unit: px, %, em or rem.
- Check the preview. The gradient box updates as you drag, including overlap scaling on large values.
- Copy the CSS. The Copy CSS button copies the full
border-radius:declaration in its shortest form.
Everything runs client-side: the preview and code are generated by JavaScript in your browser, nothing is uploaded, and the page keeps working offline once loaded. When you are ready, open the border-radius generator, set your corners, and paste the declaration straight into your stylesheet.
