v155 · css · shapes

closest-corner and farthest-corner radii for circle() and ellipse()

Radial gradients have accepted closest-corner and farthest-corner since forever; basic shapes accepted only closest-side and farthest-side. Chrome 155 closes the gap, so the same sizing keyword means the same thing in a gradient and in a clip-path — and a shape can finally be sized to reach the corner of its box.

concepts

  1. Keyword lab

    Drag the shape's centre around its box and watch all four keywords resolve, with the radius each one produces measured in pixels. The corner keywords are the ones that change most as the centre moves, which is the whole reason they are useful.

  2. Gradient parity

    The motivation, side by side: the same keyword and the same centre, once as a radial-gradient and once as a clip-path. When the two agree the boundary of the clip lands exactly on the last stop of the gradient — which you can see, and which the demo measures.

  3. Cover a card

    The practical case. A highlight that must reach every corner of its container needed hand-computed pixel radii and broke on resize; farthest-corner is the declaration that replaces the arithmetic.

why it shipped

The four keywords answer "how big should this shape be, relative to its box?" — and until now shapes could only answer it about sides. Sizing to a corner is the Euclidean distance from the centre to the nearest or farthest corner, which is exactly what a designer means by "reach the corner" and exactly what nobody wants to compute by hand, because it changes with both the box's aspect ratio and the shape's position inside it.

Radial gradients have had these keywords all along. Two syntaxes that look identical and mean different things is the kind of inconsistency that costs an afternoon; the keywords work in clip-path, shape-outside and offset-path.

the API

/* Reaches the nearest corner of the reference box. */
.spot { clip-path: circle(closest-corner at 30% 40%); }

/* Reaches the farthest — nothing of the box is left outside it. */
.cover { clip-path: circle(farthest-corner at 30% 40%); }

/* The same keyword a radial-gradient has always accepted. */
.glow { background: radial-gradient(circle farthest-corner at 30% 40%, …); }

references