v155 · css · borders
CSS corner shorthand properties
A corner now has two things to say — how big it is and what shape it is — and Chrome 155 gives you one place to say both. corner, the four per-corner shorthands, and the physical and logical edge shorthands each set border-radius and corner-shape together, instead of pairing two longhands by hand for every corner.
concepts
-
Corner builder
Set a shape and a radius per corner and watch the shorthand collapse or expand as the corners agree and disagree. The generated CSS is what you would paste, and the computed longhands are read back so you can see what the shorthand actually set.
-
Shape gallery
Every
corner-shapevalue on the same box at the same radius, so the difference between bevel, scoop, notch and squircle is a comparison rather than a description. Includes what each one does at radius zero. -
Logical corners
The physical shorthands name corners by top and bottom; the logical ones name them by block and inline. Flip the writing mode and direction and watch which set follows the text and which stays put.
why it shipped
corner-shape made a corner into two coordinated values. Without a shorthand, styling one corner means two declarations that must be kept in step, and styling four means eight — with the radius and the shape for the same corner sitting in different parts of the rule, easy to update independently and get wrong.
The shorthands mirror the structure that border-radius already established: a single value for all four, per-corner control when you need it, and logical variants so a component built for one writing mode does not need rewriting for another. corners is kept as a compatibility alias for corner.
the API
/* Shape and radius for all four corners at once. */
.card { corner: squircle 24px; }
/* One corner. */
.tab { corner-top-left: scoop 18px; }
/* An edge — both corners along the top. */
.panel { corner-top: bevel 12px; }
/* Logical, so it follows the writing mode. */
.badge { corner-block-start: notch 10px; }