CSS border-radius Test Page

1 — Shorthand: 1–4 values

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

2 — Individual Longhands

top-left only
border-radius: 0
bottom-right only
border-radius: 0
TL + BR set
border-radius: 0
all 4 longhands
border-radius: 0

3 — Elliptical Corners (/ syntax)

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

4 — Percentage Values

50% — pill/ellipse
border-radius: 50%
25% — quarter round
border-radius: 25%
50% / 25%
border-radius: 50% / 25%
25% / 50%
border-radius: 25% / 50%

5 — Overlapping Radii Reduction

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

6 — Combined Styles

solid border + bg
border-radius: 15px
dashed border
border-radius: 15px
dotted border
border-radius: 15px
no border, bg only
border-radius: 15px

7 — Clipping to the Rounded Curve (overflow: hidden)

A rounded overflow:hidden box clips its descendants to the curve itself (CSS Backgrounds and Borders Level 3 §5.5), not just its padding-edge rectangle — a child that fills the box must show rounded corners matching the parent's own, and the parent's own border must never paint past its own rounded edge.

65 / 35
pill progress bar — flex child clipped to a 999px-radius parent
Card header
Cell A
Cell B
rounded bordered card — grid content and border confined to the curve

8 — Padding/Content-Edge Radius Reduction (thick border)

The padding edge's own radius is the border-box radius minus the border thickness, clamped to zero (CSS Backgrounds and Borders Level 3 §5.5) — for a thick border relative to its radius, the inset curve must sit noticeably tighter than the outer border, not bulge past it. Both boxes below use border: 6px solid; border-radius: 14px, so the inset curve's effective radius is 14−6=8px.

background-clip: padding-box — fill's curve follows the border's own inner edge
border: 6px solid; border-radius: 14px; background-clip: padding-box
overflow: hidden — descendant fill clipped to the same reduced inner curve