CSS Border Radius Generator

Visually design border radius with individual corner controls and live preview.

Processed on your device — never uploaded
border-radius: 16px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
border-bottom-left-radius: 16px;

Frequently Asked Questions

How does CSS border-radius work?
The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually using the shorthand syntax.
Can I set different border-radius for each corner?
Yes, you can set individual values for each corner using the shorthand border-radius: top-left top-right bottom-right bottom-left, or the longhand properties like border-top-left-radius.
How do I make a perfect circle with border-radius?
Set border-radius to 50% on a square element (equal width and height) to create a perfect circle.