Border Radius
Round corners together or one at a time, with a preview.
About Border Radius
Border Radius rounds corners together or individually, with a live preview and presets from square to pill. Corner radius carries a surprising amount of tone: sharp corners read as serious and technical, heavy rounding as friendly and consumer. Consistency across a design matters more than the exact value.
How to use it
- Drag the radius slider, or pick a preset.
- Untick "all corners the same" to set each corner individually.
- Copy the CSS.
Questions
What radius should I use?
Pick two or three values and use them everywhere: something like 6px for inputs and buttons, 12px for cards, full for pills and avatars. Mixing many values looks unconsidered.
How do I make a perfect circle?
Set the radius to 50% of the element, or use the pill preset on a square element.
Should nested elements share a radius?
No — an inner element should have a smaller radius than its container, roughly the outer radius minus the padding, or the curves look wrong against each other.
Border Radius is free and runs entirely in your browser. No account, no upload, no watermark, no limit on use.