Border Radius Previewer
Adjust all four corners of a shape and copy the exact CSS border-radius declaration.
Preview corners before committing CSS
Corner radius quietly sets the personality of an entire interface. Sharp 0px corners feel technical and serious; a gentle 8–16px reads as friendly and modern; fully pill-shaped elements feel playful. Because that choice ripples across every button, card, and input, it's worth getting right — and much easier to judge by eye than by number. This previewer applies each value to a live shape as you drag.
The four sliders control each corner independently, so you can build asymmetric shapes — a card with only its top
corners rounded for a tab, or a speech-bubble effect — not just uniform rounding. When the shape looks right, copy
the shorthand border-radius declaration, which lists the corners clockwise from top-left.
Copy-ready CSS
It all runs live in your browser — nothing is uploaded, and the CSS updates the moment you adjust a corner.
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.
Need a polished interface, not just generated CSS snippets? Let us build it.