How border-radius shapes a box
Rounded corners soften buttons, cards and images, and uneven corners can give a design its own character. This guide explains the four-value order.
What is the CSS Border Radius Generator?
Enter one radius per corner and this tool combines them into a single border-radius declaration, in clockwise order starting at the top left. Larger values make corners rounder.
How to use it
- Enter a radius for each corner.
- Run the tool.
- Copy the border-radius line shown.
Worked example
Asymmetric rounded corners: 20px, 10px, 30px and 40px clockwise from the top left.
What does border-radius do?
It rounds the corners of an element, with one value per corner in clockwise order.
Frequently asked questions
In what order are the corners listed?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
What happens with a very large radius?
The corner becomes fully round, up to a pill or circle shape depending on the element size.