Chrome 157 ships a shorthand for rounded and squircle corners
A new corner property, and per-corner variants like corner-top-left, set border-radius and corner-shape together in one declaration instead of two.
Chrome 157, in stable from 3 November, adds a shorthand that sets border-radius and corner-shape together for a single corner. The release ships a corner property plus per-corner variants (corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right), per-edge variants (corner-top, corner-bottom) and their logical equivalents (corner-block-start, corner-block-end and so on).
corner-shape, which lets a corner curve as a bevel, scoop, notch or squircle instead of the usual circular round, shipped as its own property last year. Until now, combining a shape with a radius meant writing both properties out separately for every corner you wanted to style. The CSS Borders and Box Decorations spec defines each shorthand as accepting a radius value, a shape value, or both, in either order:
.card {
corner-top-left: 20px squircle;
corner-bottom-right: 12px scoop;
}Why it matters: if you’ve reached for corner-shape to build squircle buttons or scalloped cards, this collapses two declarations into one per corner, which starts to matter once different corners of the same box carry different shapes.
The caveat: corner-shape is still experimental and not yet in Baseline, so treat this as a progressive enhancement rather than something to rely on everywhere.