Skip to content

Border Radius Generator

Border Radius Generator rounds the corners of an element's outer border edge.

50px 50px 50px 50px

What is CSS Border Radius Generator?

The CSS border-radius property rounds the corners of an element. A small value softens a box, and a large value can turn it into a pill or a circle.

What this tool does

Lets you set the radius of the top-left, top-right, bottom-right and bottom-left corners in pixels, shows a live preview and gives you the CSS to copy.

How to use it

  1. Set a value for each corner.
  2. Watch the preview box change.
  3. Copy the generated CSS into your stylesheet.

Did you know?

  • In the shorthand, the corners are listed clockwise starting at the top-left.
  • A border-radius of 50 percent on a square element makes a perfect circle.

More tools in this category