Corner order and shorthand
The border-radius shorthand starts at the top-left corner and moves clockwise: top-left, top-right, bottom-right, bottom-left. This tool follows that order. When all four sliders match it writes one value; otherwise it writes four.
border-radius: 20px;
border-radius: 40px 0px 40px 0px;Each slider runs from 0 to 150 px, and values are always pixels. The CSS property also accepts percentages, other units, two-to-three value shorthands and an elliptical form with a slash such as 50% / 30%. This tool does not produce those, so edit the output by hand for ellipses.
Worked example: the clamping rule
Radii cannot overlap. If the two radii along one side add up to more than that side's length, the browser multiplies every radius by the same factor so they just fit. Take a 100 px square with 80px on every corner: each side needs 160 px but has 100, so the factor is 100 divided by 160, which is 0.625, and all four corners render at 50 px. That is a circle.
The preview shows a 300 px square drawn at about 43 percent scale (radii are scaled by the same factor), so every value from 0 to 150 px looks different and 150 px gives a full circle. In your real layout the cutoff where radii start to clamp depends on your element's size.
| Goal | Value | Note |
|---|---|---|
| Circle | 50% on a square element | Percentages follow element size; pixel values do not |
| Pill button | Any radius of at least half the height | For example 9999px; clamping handles the rest |
| Leaf shape | 0 50% 0 50% | Opposite corners rounded, the other two sharp |
| Chat bubble | Three large corners, one at 0 | The sharp corner points at the speaker |
Gotchas
- Images and children. Rounding a box does not clip its contents. Add
overflow: hiddento the box, or put the radius on the image itself. - Nested rounding. An inner element inside a padded rounded card looks best with a radius equal to the outer radius minus the padding, otherwise the gap between curves looks uneven.
- Sizing in rem. If the rest of your layout scales with the root font size, convert with the px to rem converter.