About This Tool
Border Radius Generator controls corners in top-left, top-right, bottom-right, bottom-left order. With Link Corners enabled, changing any corner updates the other three, making uniform corners quick to set.
How to Use
- Choose a radius unit and enter nonnegative values for all four corners.
- Enable Link Corners to keep all corners the same.
- Watch the preview box change shape.
- Copy CSS or reset the settings to try another shape.
Examples
- 10, 20, 30, and 40px specify four independent corner radii.
- Four corners of 20px produce border-radius: 20px.
- Top-left and bottom-right at 10px, with top-right and bottom-left at 20px, reduce to 10px 20px.
border-radius: 10px 20px 30px 40px;
border-radius: 20px;How It Works & CSS Details
Four-value border-radius starts at the top-left corner and runs clockwise. Four equal values reduce to one; matching opposite corners reduce to two. Other combinations can also use CSS shorthand where appropriate. The browser scales oversized radii to a drawable size according to CSS rules.
Common Uses
- Set consistent rounded corners for cards and buttons.
- Create decorative containers with asymmetric corners.
- Learn border-radius value order and shorthand rules.
Privacy
All input processing, calculations, CSS generation, and previews run in your browser. Your content is never uploaded. No backend, database, online API, or third-party CDN is used, and your input is not saved automatically.
FAQ
What is the order of the four corners?
Top-left, top-right, bottom-right, bottom-left, moving clockwise.
What does Link Corners do?
When enabled, changing any corner copies that value to the other three corners.
Why does the output sometimes contain just one or two values?
Matching corner values can use standard CSS shorthand. The shorter output produces the same shape as all four values.
Why does a very large radius look smaller than its value?
When adjacent radii add up to more than the box dimensions, the browser proportionally scales all corners according to CSS rules to prevent overlap.