CSS Border-Radius Generator

Create custom rounded corners visually

Top-Left
20px
Top-Right
40px
Bottom-Right
60px
Bottom-Left
80px
CSS Output

What is Border-Radius?

Border-radius creates rounded corners on HTML elements. You can control each corner independently for custom shapes. Perfect for buttons, cards, and modern UI design. The four values are applied in clockwise order: top-left, top-right, bottom-right, bottom-left.

Frequently Asked Questions

What do the four values mean?

Order: top-left, top-right, bottom-right, bottom-left (clockwise from top-left).

How do I make a circle?

Set border-radius to 50% on a square element. All corners become perfectly rounded, forming a circle.

Can I use different units?

Yes, you can use px, em, rem, or percentages. Percentages are relative to the element's dimensions.