CSS gets a new corner-shape property, and it is not a minor tweak. Currently supported in Chrome 139+ and Chromium-based browsers, corner-shape works as a companion to border-radius, modifying the curve type rather than the radius value. Six values are available: round, squircle, bevel, scoop, notch, and square. Each can be assigned per corner, the same syntax as border-radius. The squircle value produces the superellipse curve Apple uses for app icons. The bevel value cuts a straight line between radius endpoints. Scoop inverts the curve inward. None of this was possible in pure CSS before without brittle workarounds.
The workarounds matter because they have always had real costs. clip-path clips the element, so borders vanish, box shadows get cut off, and any change to padding risks breaking the shape entirely. corner-shape sidesteps all of that. Because it defines the actual geometry of the element, borders, outlines, and box shadows follow automatically. The article also introduces superellipse() as a function, accepting a numeric parameter for granular control between bevel at 0 and full squircle at higher values, and the transitions animate smoothly between those states.
The author structures every demo using CSS cascade layers and @supports (corner-shape: bevel), delivering a polished baseline with existing techniques and a silent upgrade for supporting browsers. No fallback messages. The ribbon badge demo alone is worth reading in full: corner-shape: round bevel bevel round on a single element produces a directional ribbon shape that previously required clip-path polygons or rotated pseudo-elements. The article also points to a separate upcoming border-shape property, which is an entirely different spec. Read it for the demo code and the progressive enhancement scaffolding, which is directly reusable.
[READ ORIGINAL →]