CSS Border Radius Generator

Using the CSS Border Radius Generator

The shorthand order

border-radius with four values runs clockwise from the top left: top left, top right, bottom right, bottom left. One value rounds all corners equally. The generator writes the shortest correct form.

Pixels or percent

Pixel values keep the same rounding whatever the size, the right choice for buttons and cards. Percent values scale with the element: 50% on a square makes a circle, and on a rectangle an ellipse. Large unequal percentages give soft, organic blob shapes.

Pills and circles

For a pill-shaped button, use a radius larger than half the height, such as 999px; the browser caps it so the ends are perfectly round. For a circle, give a square element 50%.

Rounding and overflow

Rounded corners clip the element's background and border, but not its children. Add overflow: hidden to the parent if an image inside should follow the rounded corners.

Radius and design consistency

Pick two or three radius values for a whole interface, for example 6px for small controls, 12px for cards and 999px for pills, and reuse them everywhere. Nested elements look best when the inner radius equals the outer radius minus the padding between them, so corners stay parallel.

Frequently asked questions