CSS Border Radius Builder
Drag four sliders to set each corner radius independently or link them together. Choose px, %, or rem units. See a live preview and copy the generated CSS in one click. Runs in your browser.
Build a CSS border-radius declaration with linked or independent corner values and switch the output unit between px, %, and rem.
How to generate border radius CSS
- Choose whether all four corners stay linked.
- Move each corner slider and select px, %, or rem.
- Preview the shape and copy the border-radius declaration.
How the generator works
Each corner uses an integer slider from 0 to 100 and the selected unit is appended directly to that number.
When all four numeric values match, the tool emits one shorthand value; otherwise it emits four values in CSS corner order.
Privacy and limitations
Everything runs locally in your browser. Changing units does not mathematically convert existing values; the same slider number is simply reinterpreted with the newly selected unit.
Border radius FAQ
Can I unlink the corners?
Yes. Turn off the linked option.
Which units are available?
px, %, and rem.
Does changing px to rem convert the number?
No. It keeps the numeric slider value and changes only the unit.
What order are four values written in?
Top-left, top-right, bottom-right, bottom-left.
Can I copy the CSS?
Yes. The generated declaration can be copied directly.