v155 · basic shapes
Keyword lab
Move the centre and every keyword resolves to a different radius. The table computes all four from the geometry — distance to the nearest side, the farthest side, the nearest corner, the farthest corner — so you can read what the browser is doing rather than infer it from a silhouette.
Drag the centre
| keyword | resolves to | radius |
|---|
A corner radius is the straight-line distance to a corner, so it is always at least as large as the side distance in the same direction — and it changes with the box's aspect ratio, which is why hard-coding it in pixels never survives a resize.