1. plain px radius — corners cut, edges straight

above: square (control)

above: 8px, then 22px = half the height, so the ends are half-circles

2. per-corner and the 1-4 value expansion

above: top-left only

above: top-left and bottom-right (the 2-value form)

above: top-right only

3. percentages resolve against the box, not the font

above: an ellipse filling the whole 260×44 box

above: a circle (square box + 50%)

4. the slash form — an arc, not a rectangle

above: a dome — flat bottom, the top is one continuous curve. This is the shape netflix.com uses under its hero; before this it painted as a full rectangle.

5. radii bigger than the box are scaled down together

above: a pill. 999px cannot fit, so all four radii shrink by the same factor until they do — the result must be exactly the same as the 22px case in section 1, not a mangled shape.

6. a gradient background rounds too

above: violet-to-red, with the same pill outline — the gradient must not spill into the corners.

above: the dome again, gradient-filled.

7. known gaps (these are expected to look square)

above: a border, not a background — borders are not rounded yet, so this stays a rectangle.