Can I round only one corner?

Yes. Each corner has its own slider, so you can round one, two or all four independently.

How do I make a circle?

Set every corner to a large value (or 50% in your own CSS) on a square element to get a perfect circle.

Yes. It outputs a normal border-radius declaration you can paste straight into your stylesheet.

CSS & Design

Design rounded corners with per-corner sliders and copy the CSS.

Free browser toolRuns in your browserNo sign-up

Top left20px

Top right20px

Bottom right20px

Bottom left20px

border-radius: 20px 20px 20px 20px;

Drag each corner independently, or set them equal for a uniform radius.

The CSS border-radius property rounds an element's corners. Getting each corner just right by editing numbers is slow.

This generator gives you a slider for every corner with a live preview, then hands you the border-radius CSS to copy.

It runs entirely in your browser.

Rounded card

Output: border-radius: 20px 20px 20px 20px;

Equal values round all four corners the same amount.

Can I round only one corner?: Yes. Each corner has its own slider, so you can round one, two or all four independently.
How do I make a circle?: Set every corner to a large value (or 50% in your own CSS) on a square element to get a perfect circle.
Is the output standard CSS?: Yes. It outputs a normal border-radius declaration you can paste straight into your stylesheet.

Open a related tool to prepare your files or refine the finished result.