CSS Border Radius Generator
Generate CSS border-radius values visually. Create rounded corners, pills, circles. Copy border-radius CSS code.
About this calculator
Drag four sliders to round each corner of a box on its own, or use presets: Square, Rounded, Pill and Top round.
Every control updates a live preview and the CSS code at once. Copy the declaration into your stylesheet.
How to use it
- Move the corner sliders or pick a preset.
- Watch the preview.
- Press Copy.
How border-radius works
One value rounds all four corners. Four values go clockwise from top-left: top-left, top-right, bottom-right, bottom-left. 50% on a square makes a circle; a large pixel value (such as 9999px) on a rectangle makes a pill. Elliptical corners use a slash: border-radius: 50% / 30%.
Worked example
Common values
| border-radius: 8px | Soft card corners |
| border-radius: 50% | Circle (on a square) |
| border-radius: 9999px | Pill button |
| border-radius: 12px 12px 0 0 | Rounded top only |
Tips and common mistakes
- Use 8 to 16px for cards, 4 to 6px for inputs.
- Use the same radius family across your UI.
- Nested elements need a smaller inner radius (outer minus padding).
- overflow:hidden is needed to clip children to rounded corners.
- Percent radii depend on the box's shape.
Frequently asked questions
What does border-radius do?
It rounds the corners of an element's box.
How do I make a circle?
Use border-radius: 50% on a square element.
How do I round only the top?
Set border-radius: 12px 12px 0 0.
Can I use different values per corner?
Yes, give four values clockwise from top-left.
Does it work on images?
Yes.
Is it supported everywhere?
Yes, in all modern browsers.