widgets
lock Free · Private · In-Browser
Border Radius Previewer
Adjust all four corners of a shape and copy the exact CSS border-radius declaration.
Preview corners before committing CSS
Border radius has a huge effect on the personality of a UI. Sharp, slightly rounded, and pill-shaped components all feel different.
This previewer makes corner tuning visible and gives you a copyable CSS declaration for the final values.
Frequently Asked Questions
Can each corner be different?
Yes. Adjust top-left, top-right, bottom-right, and bottom-left independently.
What unit does this use?
The controls use pixels because they are easy to reason about visually.
Can I use this for buttons and cards?
Yes. The generated CSS works anywhere border-radius is accepted.
Take it further
Web Design Services
Need a polished interface, not just generated CSS snippets? Let us build it.