Border Radius Generator
Visually design CSS border-radius shapes with a live preview.
border-radiusroundedcss
Read the guideShortcuts:⌘ KSearch?HelpD MDark modeG TAll tools
Corner controls
Preview
Generated CSS
Frequently Asked Questions
How do I set different radii on each corner?
Turn off Link all. With linking disabled, each corner gets its own slider and its own unit selector.
Why does the output sometimes collapse to one value?
If all four corners resolve to the same value and unit, the tool emits the shortest valid shorthand like `border-radius: 20%;`. If they differ, it outputs the four-value form.
Can I mix `px` and `%` in one shape?
Yes, as long as Link all is off. Each corner stores its own numeric value and unit.
What range can I choose in the UI?
Each slider runs from 0 to 50. You can then interpret that number as either `px` or `%` using the unit dropdown.
Why do percentage corners look different from pixel corners?
Because `%` radii scale with the box size, while `px` radii stay fixed. On responsive elements, percentage rounding changes more visibly as the box grows or shrinks.