What is the CSS border-radius property used for?

The CSS border-radius property creates rounded corners on HTML elements. The border radius generator makes it easy to visualize and generate the correct CSS values without manually calculating pixel or percentage values for each corner.

Can I set different values for each corner using the border radius generator?

Yes, the border radius generator lets you set individual values for the top-left, top-right, bottom-right, and bottom-left corners independently. You can also use the uniform mode to apply the same value to all corners at once.

Border Radius Generator

Preview and copy CSS corner radii.

Help & examples All tools

Use the same radius for all corners

Top-left (px)

Top-right (px)

Bottom-right (px)

Bottom-left (px)

Each corner accepts 0–100 px. CSS may scale overlapping corners to fit a smaller element.

Preview

CSS declaration

border-radius: 16px 16px 16px 16px;

Design Tools Local processing

How to use

Use a uniform value or edit each corner from 0 to 100 px.

Adjust border radius values

Use the sliders to adjust the border-radius of each corner or all corners uniformly. The border radius generator shows a live preview of your element with the current corner radius values applied.

Preview the result

See your element update in real time as you adjust values. The border radius generator provides a visual preview box that demonstrates exactly how your rounded corners will look on a real element.

Copy the CSS code

Copy the generated CSS with one click. The border radius generator outputs clean, formatted CSS that you can paste directly into your stylesheet for buttons, cards, images, or any other element needing rounded corners.

Limits and questions

Inputs are processed in your browser. Analytics and advertising can make separate network requests.

Frequently asked questions

What is the CSS border-radius property used for?: The CSS border-radius property creates rounded corners on HTML elements. The border radius generator makes it easy to visualize and generate the correct CSS values without manually calculating pixel or percentage values for each corner.
Can I set different values for each corner using the border radius generator?: Yes, the border radius generator lets you set individual values for the top-left, top-right, bottom-right, and bottom-left corners independently. You can also use the uniform mode to apply the same value to all corners at once.