How to generate CSS border radius

Start with one radius

Apply the same radius to all four corners with one value:

A small value creates a subtle curve. A larger value creates a softer shape. The visible result also depends on the element’s width and height, so 16px looks stronger on a compact button than on a large panel.

Set each corner with shorthand

Four values follow the corners clockwise, starting at the top left:

Two values alternate diagonal corners. Three values set the top left, both opposing corners, and the bottom right. Using four explicit values is often easiest to review when every corner matters.

Pixels and percentages behave differently

Pixel radii are fixed CSS lengths. Percentage radii are calculated against the element’s dimensions. border-radius: 50% produces a circle only when the box is square; on a rectangle it produces an ellipse.

For a pill-shaped control, a very large fixed radius such as 9999px is common. The browser limits overlapping radii so they fit the box. This makes the ends fully rounded without requiring the element’s exact height.

Generate and test the declaration

1. Choose pixels for fixed curves or percentages for shape-relative curves.
2. Set the top-left, top-right, bottom-right, and bottom-left values.
3. Preview the result on a box with proportions similar to your real element.
4. Copy the declaration into the target CSS rule.
5. Test at responsive sizes, especially if the element changes shape.

Border radius clips the background, but child content may still overflow unless the layout also uses an appropriate overflow value. Focus outlines should remain visible and should not be replaced with border radius alone.

Use the ToolPixels generator

The free CSS Border Radius Generator lets you set all four corners in pixels or percentages and preview the shape before copying the CSS.

Generate border radius CSS