Border Radius Generator
Set each corner and copy the border-radius CSS.
Rounded corners, precisely
The border-radius property rounds an element’s corners, and controlling each one independently unlocks pills, teardrops, and subtle asymmetric cards. This generator makes that visual and copyable.
Adjust each corner and watch the preview update, then copy the exact CSS. Equal values give a uniform round; mixing them creates more distinctive shapes.
Visual and private
The CSS is generated in your browser, so nothing you enter is uploaded.
Frequently Asked Questions
What does it generate?
The CSS border-radius property, with independent control of all four corners and a live preview.
Can corners differ?
Yes. Each corner takes its own radius, so you can make asymmetric or pill shapes.
Can I copy the CSS?
Yes. The property is shown and one click copies it.
Browse the full set of free, private, in-browser tools.