CSS Border Radius Generator
Last updated: June 2026 · Free · No sign-up required
Frequently Asked Questions
How does the 'Link all corners' option work?
When checked, adjusting the slider of any single corner will instantly apply that exact same border-radius value to all other three corners, producing a symmetric round shape.
What is the syntax for separate corners in CSS?
In CSS, border-radius can accept up to four values (separated by spaces), representing top-left, top-right, bottom-right, and bottom-left respectively (clockwise order).
Can I use percentage values?
This generator focuses on pixel (px) values, which are most common for precise layouts. For a perfect circle, you can set the values to 50% in your stylesheet if the element has equal width and height.
Quick reference
| Syntax | Effect |
|---|---|
| border-radius: 8px | all corners 8px |
| border-radius: 50% | circle / ellipse |
| border-radius: 10px 0 | top-left/bottom-right vs others |
| Four values | TL, TR, BR, BL clockwise |
Interpretation guide
| Look | Setting |
|---|---|
| Subtle rounding | 4–8px |
| Pill button | 999px |
| Circle | 50% (on a square) |
| Organic blob | different % per corner |
Formula & methodology
Formula: border-radius: top-left top-right bottom-right bottom-left (clockwise from top-left)
The generator lets you set each corner radius visually and outputs the exact CSS border-radius rule.
- Adjust each corner’s radius and watch the live preview.
- Use px for fixed rounding or % for circles and blobs.
- The four values run clockwise: top-left, top-right, bottom-right, bottom-left.
- Copy the generated border-radius declaration into your CSS.
Worked example: Setting all four corners to 12px outputs border-radius: 12px;.