CSS Border Radius Generator

Rounded corners with a live preview box.

Runs in your browser. Nothing is uploaded — your input is processed on this device and discarded when you close the tab.

CSS Border Radius Generator

How to use this tool

  1. Enter a radius for each corner in pixels, starting at the top left and going clockwise.
  2. Press Generate. The preview box updates and the CSS value is shown.
  3. Copy the border-radius line into your stylesheet.

Worked example

With corners 10, 20, 30 and 40, the CSS is 'border-radius: 10px 20px 30px 40px;' in clockwise order: top left, top right, bottom right, bottom left.

What this tool does not do / Limits

Pixel values only, from 0 to 200, with one radius per corner: elliptical corners (two values per corner, separated by a slash) are not supported.

Frequently asked questions

In what order do the four values go?

Clockwise from the top left: top left, top right, bottom right, bottom left.

What happens if all four values are equal?

Then the CSS can be shortened to a single value, for example 'border-radius: 10px;', but this tool always shows the full four-value form so the order stays clear.

Related tools

JSON Studio

Format, validate, minify, query and compare JSON in your browser, with precise line-and-column errors.

Live

Regex Tester

Test patterns against sample text with match highlighting, capture groups and a safe one-second timeout.

Live

Security Header and DNS Checker

Check HSTS, CSP and other security headers, TLS details, and DNS/email authentication records (SPF, DKIM, DMARC).

Live