CSS gets a new corner-shaping primitive in 2026. The `corner-shape` property, currently supported in Chrome 139+ and Chromium-based browsers, works as a companion to `border-radius` and extends it into territory that previously required `clip-path` hacks, SVG masks, or brittle pseudo-element tricks. It accepts six values: `round`, `squircle`, `bevel`, `scoop`, `notch`, and `square`. Each value can be set per corner, matching the familiar four-value shorthand syntax of `border-radius`. A `superellipse()` function with a numeric parameter gives fine-grained control between values.
The critical difference from `clip-path` is that `corner-shape` does not mask the element. Borders, box shadows, outlines, and backgrounds all conform to the declared shape natively. That eliminates the core failure mode of every previous corner-shaping workaround. The article demonstrates this through three production-relevant UI patterns: e-commerce ribbon badges built with `corner-shape: round bevel bevel round`, card components upgraded from circular arcs to `squircle` superellipses, and buttons that animate between `bevel` and `squircle` states using a smooth CSS transition, something that was previously impossible without JavaScript or pre-generated SVG keyframes.
The article structures every demo around a three-layer progressive enhancement pattern using `@layer base, presentation, demo` and `@supports (corner-shape: bevel)` guards, with no fallback warnings and no broken baselines. That architecture is worth reading in detail because it is transferable to any emerging CSS property. The broader `corner-shape` specification also connects to a separate upcoming `border-shape` property, which the article flags but does not cover. That gap alone is a reason to keep watching this space.
[READ ORIGINAL →]