Color and design

CSS Border Radius Generator

Set each corner radius visually using pixels or percentages, then copy the CSS declaration.

Preview corners

Use 0 to 500 pixels or 0 to 100 percent. Corner order is top left, top right, bottom right, bottom left.

Your inputs and results are processed in your browser and are not uploaded to ToolPixels. This tool does not save them.

Pixels and percentages

Pixel radii are fixed lengths. Percentage radii use the element width and height, so 50% makes a circle only when the element is square.

Browsers proportionally reduce overlapping radii to fit the box. The preview is rectangular to show how the same radius changes with an element shape.