CSS Border-Radius Generator
Adjust the top-left, top-right, bottom-right, and bottom-left corner radius — the preview and the generated CSS update instantly. Enable "Link corners" to control all four corners with a single value, or disable it to set each corner independently. Switch the unit between px (pixels) and % (relative to the element size, handy for circular or pill-shaped buttons and icons). The generated border-radius declaration can be copied to the clipboard with one click. Pairs well with the CSS Box-Shadow Generator for rounded, shadowed cards.
🔒 Runs in your browser · Your data is never sent to a server
Corner radius
Preview
Notes
- Switching the unit clamps existing values to the new unit’s maximum (px: 500, %: 50).
- A % value is relative to the element’s width and height. Setting all four corners to 50% turns a square element into a circle, and a rectangular one into an ellipse.
- Per the CSS spec, `border-radius` values are listed in the order top-left, top-right, bottom-right, bottom-left. When all four corners match, the declaration is shortened to a single value.
Glossary
border-radius
The CSS property that rounds an element’s corners. Four space-separated values apply in the order top-left, top-right, bottom-right, bottom-left; a single value applies to all four corners.
px (pixel)
An absolute length unit on screen. The corner radius stays a fixed size regardless of the element’s dimensions.
% (percent)
A unit relative to the element’s width and height. The corner radius scales up or down as the element’s size changes.
FAQ
How do I make a circle or ellipse?
On a square element, set the border radius to 50% to get a circle; on a rectangle, 50% gives an ellipse. With pixel values, anything above half the element size still renders as maximum rounding.
Can each corner have a different value?
Yes. Turn off the linked-corners option to set top-left, top-right, bottom-right and bottom-left individually. When all four corners are equal, the CSS is shortened to a single value.
How do I use the generated CSS?
Copy the border-radius line and paste it into the style rules of your element. It works in all major browsers without vendor prefixes.
Share this page