CSS Border Radius Generator
Build custom border-radius values visually and copy the CSS.
Corners
12px
12px
12px
12px
border-radius: 12px;Presets
This tool lets you visually adjust an element's corner rounding - each corner independently if needed - with live preview, then generates the exact CSS border-radius syntax to copy, including support for the more complex elliptical corner values that are easy to get wrong by hand.
Frequently asked questions
Yes - independently adjusting all four corners is supported, not just a single uniform radius applied everywhere.
Yes - with large enough radius values (or elliptical corner values), you can create fully rounded/circular shapes or organic blob-like outlines.
border-radius is well-supported in all modern browsers without vendor prefixes, so the generated CSS should work consistently everywhere.