Border Radius Generator
Set four corners and get the shortest CSS that produces them, with a warning when the box is too small to hold them.
Results
What this tool does
Rounding all four corners the same is easy. Rounding three of them, or making one square, means remembering which order the shorthand goes in and how the two- and three-value forms distribute. This page takes the four corners you want and writes the shortest line that produces exactly those, in whichever unit you are working in. It also checks the corners against the size of the box, because CSS silently shrinks anything that will not fit.
Formula
writes the shortest border-radius that gives the four corners you asked for
Variables
| Symbol | Meaning | Unit |
|---|---|---|
top_left | Top left | — |
top_right | Top right | — |
bottom_right | Bottom right | — |
bottom_left | Bottom left | — |
unit | Unit | — |
width | Box width | px |
height | Box height | px |
OUT | The CSS | — |
VA | Just the value | — |
DC | Different corners | — |
LC | Largest corner | — |
LI | Most the box allows | px |
CP | The browser will trim it | — |
PI | Comes out as a pill | — |
Worked example
- Top left16
- Top right16
- Bottom right4
- Bottom left16
- Unitpx
- Box width240 px
- Box height140 px
- The CSSborder-radius: 16px 16px 4px;
- Just the value16px 16px 4px
- Different corners2
- Largest corner16.0
- Most the box allows70.0 px
- The browser will trim itNo
- Comes out as a pillNo
Frequently asked questions
Why does it sometimes give me fewer than four numbers?
Because CSS lets you say the same thing more briefly when the corners repeat. One value sets all four. Two set the top-left-and-bottom-right pair and then the other pair. Three set top-left, then both of the remaining diagonal corners, then bottom-right. This page always writes the shortest form that produces exactly the corners you asked for, which is what you would write by hand if you had the rule memorised.
What does "the browser will trim it" mean?
That you have asked for corners larger than the box can hold. When two corners on the same edge add up to more than the length of that edge, CSS scales all of them down in proportion until they fit, so the shape you get is not the shape you wrote. It is not an error and nothing breaks, but the numbers in your stylesheet stop describing what appears on screen — and when the box later changes size, the result changes with it.