🔄 CSS Border Radius Generator
Design border-radius with a live preview. Adjust each corner independently, switch between px and %, and copy production-ready CSS in one click. No upload, no signup.
About the CSS Border Radius Generator
The border-radius CSS property rounds the corners of an element's outer border. You can set a single value for all corners, or four values (top-left, top-right, bottom-right, bottom-left) for asymmetric shapes. With the % unit you can create circles and ellipses. This generator lets you dial in each corner with live controls and copy the result instantly.
Properties you can control
- Top-left — Radius of the upper-left corner.
- Top-right — Radius of the upper-right corner.
- Bottom-right — Radius of the lower-right corner.
- Bottom-left — Radius of the lower-left corner.
- Unit — Use
pxfor fixed sizes or%for fluid shapes. - Link all corners — Move all four together for uniform rounding.
How to use
- Choose a unit (
pxor%). - Drag the corner sliders to set the radii.
- Uncheck Link all corners to set each corner independently.
- Click Copy CSS and paste into your stylesheet.
Frequently asked questions
How do I make a perfect circle? Set all four corners to 50% on a square element. The element must have equal width and height for a perfect circle.
What's the difference between px and %? px gives a fixed radius regardless of element size. % computes the radius relative to the element's dimensions, so the same value adapts as the element resizes.
What's the CSS order of corners? The four-value syntax goes clockwise from top-left: top-left top-right bottom-right bottom-left.