Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
CSS border-radius accepts up to four values for independently rounding each corner, in clockwise order starting from the top-left — easy to get backwards when set by hand, and unnecessarily verbose when every corner is actually the same.
This generator builds a border-radius declaration from each corner's value, simplifying to a single value when they all match.
How it works
Enter a value for each of the four corners (top-left, top-right, bottom-right, bottom-left) and choose px or % as the unit. The generator checks whether every corner matches and produces either a single-value shorthand or the full four-value declaration.
- Enter top-left.
- Enter top-right.
- Enter bottom-right.
- Enter bottom-left.
- Enter unit.
- Click Calculate to see your results.
Examples
Uniform rounded corners
Setting all four corners to 10px produces the simplified border-radius: 10px;, rather than repeating the value four times.
Who should use it
- Creating rounded card, button, or image corners for a web design.
- Building an asymmetric or speech-bubble-style rounded shape.
Industry applications
- Web design and front-end development
- UI/UX design
Advantages
- Automatically simplifies to shorthand when every corner matches.
- Supports both px and % units.
Limitations
- Doesn't support the CSS border-radius "elliptical" syntax (separate horizontal/vertical radii per corner) — only simple, equal-radius corners.
Common mistakes to avoid
- Assuming the four-value order starts from top-right or goes counter-clockwise — it always starts top-left and goes clockwise.
- Using percentage values when a fixed pixel radius was actually intended (or vice versa), producing an unexpectedly different shape at different element sizes.
Best practices
- Use percentages (like 50%) when you want a shape (such as a circle) that scales proportionally with the element; use fixed pixel values for a consistent rounding regardless of element size.
Tips
- Setting border-radius to 50% on a perfectly square element (equal width and height) always produces a perfect circle — a common trick for circular avatar images or icon buttons.