← All text tools

CSS border radius generator

Round each corner with sliders and copy the border-radius CSS.

  • Free
  • No sign-up
  • Works on any device

About CSS border radius generator

Round each corner separately with sliders and see the shape change at once, then copy the border-radius line. Using 50 percent on a square makes a circle, while a very large pixel value on a rectangle gives a pill. The eight-value slash syntax allows elliptical, blob-like corners.

How to use CSS border radius generator

  1. Set the options above. The result updates live.
  2. Change anything until it's just right.
  3. Copy the result or download it.

Why use this tool?

Also known as

Frequently asked questions

How do I make a perfect circle with CSS?

Give the element equal width and height, then set border-radius to 50 percent. Without equal sides you get an oval instead.

Is CSS border radius generator free?

Yes. CSS border radius generator on Toolipedia is free to use, with no sign-up and no watermark.

Is it safe to use?

Yes. Everything is worked out in your browser, and nothing you enter is sent to our server.

Does it work on my phone?

Yes. It works in any modern browser on Android and iPhone, as well as on tablets and computers. There's nothing to install.

Do I need an account?

No. Just open the page and use the tool. There's no sign-up and no email needed.

Related tools