CSS Border Radius Generator
Set a different radius for each corner and get the CSS.
Quick answer: enter your details below and click Generate radius — your result appears instantly, right here in your browser. Nothing you enter is uploaded or stored.
C
Image & Design
Enter your details below.
How to use
- Enter a radius for each corner.
- Run the tool.
- Copy the border-radius line shown.
About this tool
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.
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.