1 value — all equal border-radius: 20px | 2 values — opposite pairs border-radius: 10px 30px | 3 values — TL / TR+BL / BR border-radius: 8px 20px 35px | 4 values — each corner border-radius: 5px 15px 30px 45px |
top-left only border-radius: 0 | bottom-right only border-radius: 0 | TL + BR set border-radius: 0 | all 4 longhands border-radius: 0 |
flat wide (40px / 10px) border-radius: 40px / 10px | tall narrow (10px / 40px) border-radius: 10px / 40px | uniform ellipse (30px / 20px) border-radius: 30px / 20px | asymmetric border-radius: 20px 0 / 0 20px |
50% — pill/ellipse border-radius: 50% | 25% — quarter round border-radius: 25% | 50% / 25% border-radius: 50% / 25% | 25% / 50% border-radius: 25% / 50% |
Each box is 80px wide. A radius larger than half the box is automatically scaled down.
60px on 80px box border-radius: 60px | 100px (auto-capped) border-radius: 100px | 50% on tall box border-radius: 50% | no overlap — 20px border-radius: 20px |
solid border + bg border-radius: 15px | dashed border border-radius: 15px | dotted border border-radius: 15px | no border, bg only border-radius: 15px |