CSS gets a new corner-shape property, currently shipping in Chrome 139+ and Chromium-based browsers. It works as a companion to border-radius, leaving that property to define the size of the corner offset while corner-shape controls the geometry of the curve itself. The accepted values are: round, squircle, bevel, scoop, notch, and square. You can assign different values per corner using the same shorthand order as border-radius, and the superellipse() function gives numeric control over the curve tension.
The real break from the past is what corner-shape affects. Unlike clip-path, which severs box shadows and ignores borders, corner-shape modifies the actual rendered shape of the element. Shadows, outlines, and backgrounds all follow the declared geometry. That eliminates the brittle workaround stack that developers have been maintaining since border-radius stopped being enough: clip-path polygons that collapse on padding changes, SVG masks for ticket-edge scoops, carefully tuned superellipse SVGs for squircle icons that nobody wants to animate. The article walks through concrete production cases, including e-commerce ribbon badges built with corner-shape: round bevel bevel round and card components upgraded from border-radius: 12px to squircle curves, with before-and-after comparisons that show why the difference registers as feel rather than shape.
The author structures every demo using @layer base, presentation, demo and wraps corner-shape usage inside @supports (corner-shape: bevel), making progressive enhancement mechanical rather than theoretical. The baseline designs using border-radius, clip-path, and radial-gradient masks are built to look finished, not degraded. The full article is worth reading for the layered CSS architecture alone, and for the animated bevel-to-squircle button transition that now costs one property instead of a custom SVG pipeline.
[READ ORIGINAL →]