Why the radius has to change at all: with corner-shape, border-radius no longer describes the corner, only the r × r box it is drawn in. A squircle hugs the corner of that box. Along the diagonal it comes 0.16 r in from the corner where a circle comes 0.29 r, and it cuts away a third as much, so at the same radius it looks like a smaller, sharper corner. Bevels and scoops cut deeper than a circle, so for them the radius shrinks.

Of the three ways to match, the whole contour is the default, being the closest to how the eye compares two outlines. The diagonal point is easy to check by eye but ignores the rest of the curve; the cut area keeps the visual weight of a filled block. For a squircle they land within ×1.72–1.84 anyway. Matching evens out the size, not the shape: a matched squircle still differs from the circle by about a fifth of what it did at the same radius. That difference, a curve that starts earlier and turns more gently, is the reason to use one.

--bdrs-x is registered for two reasons. initial-value: 1 keeps the calc() valid where nothing sets it; an unregistered variable that is never set makes the whole border-radius invalid, and the corner comes out square. inherits: false keeps an element’s multiplier out of its children’s radii. The radius itself can be anything, design tokens included, calc(var(--radius-m) * var(--bdrs-x)), so one multiplier per shape covers a whole interface, and moving it to squircles is one @supports block.

A radius can’t be more than half the side it sits on; when it is, the browser scales all the corners down until they fit. A pill is already at that limit, so a multiplied radius gets scaled straight back and a squircle pill just comes out squarer. Multiplying only the horizontal radius and keeping the vertical one at 50% gives the curve a longer run along the long side, which brings it closer to the round pill. Once the horizontal radius outgrows half the width, though, the browser scales both again and the corners stop meeting in the middle.

And the squircle isn’t the iOS corner. Apple’s continuous corner is a circular arc with the curvature eased in over about 1.5 r of the edge, within 0.014 r of a plain circle. The closest superellipse is superellipse(1.31) at 1.2 times the radius, within 0.005 r, while squircle is 0.19 r away. The Black Tuner page uses that.