132 · Design & Web

Border Radius Generator

Round all four corners at once or shape each one separately, then copy the CSS.

How to use the border radius generator

  1. Use one slider for all corners, or untick it to set each corner.
  2. Watch the preview.
  3. Copy the border-radius line.

The shorthand order

With four values, border-radius goes clockwise from the top left: top-left, top-right, bottom-right, bottom-left. When all corners match, the tool writes a single value.

Examples

All corners 24px

border-radius: 24px;

40, 8, 40, 8

border-radius: 40px 8px 40px 8px;

Questions

How do I make a circle?

Give a square element a radius of 50%, or a radius at least half its width.