CSS Border Radius Generator
Round corners together or independently, with a live preview and the shortest valid CSS shorthand.
Live Preview
Generated CSS
Your Data Never Leaves Your Device
Every tool runs entirely in your browser. Nothing you type is uploaded, stored, or logged on our servers.
The CSS Border Radius Generator lets you round an element's corners with a live preview, either linked together or adjusted one at a time. Independent corners are how you build asymmetric shapes — speech bubbles, tab headers, and leaf shapes all come from mismatched radii.
The output uses the shortest shorthand your settings allow: one value when every corner matches, two when opposite corners pair up, and four only when they genuinely differ — so you get border-radius: 8px; rather than 8px 8px 8px 8px. Worth knowing: when adjacent radii would overlap, browsers scale all of them down proportionally to fit the box, which is why a very large radius on a small element looks smaller than the number suggests. Everything runs in your browser.
FAQ
One value rounds all four corners. Two values set top-left/bottom-right and top-right/bottom-left. Four values go clockwise from the top-left. This tool emits the shortest form your settings allow.
Set border-radius to 50% on an element with equal width and height. For a pill or capsule shape, use a large pixel value like 9999px on a wider element.
Yes. Turn off corner linking and each corner gets its own slider, which is how you build asymmetric shapes like speech bubbles and tab headers.
When adjacent radii would overlap, the browser scales every radius down proportionally so they still fit the box. Reduce the values or increase the element's size.
Not on its own — backgrounds and borders follow the curve, but children can still overflow the corners. Add overflow: hidden to clip them, which matters most for images.
No. The preview and CSS are generated entirely in your browser.