Beyond border-radius: What The CSS corner-shape Property Unlocks For Everyday UI — Smashing Magazine

The new CSS `corner-shape` property works alongside `border-radius` to unlock beveled, scooped, notched, and squircle corners without resorting to clip-path hacks or SVG masks. Currently supported in Chrome 139+ and Chromium-based browsers, it accepts values like `round`, `squircle`, `bevel`, `scoop`, `notch`, and `square`, and can be set per-corner. Five practical UI demos — product cards, button components, testimonial cards, pricing cards, and a music player — illustrate how to use `@supports` and CSS layers to progressively enhance designs. Unlike `clip-path`, `corner-shape` allows borders, shadows, and backgrounds to follow the declared shape natively. The recommended approach is to build a solid baseline with `border-radius` first, then layer `corner-shape` enhancements for supporting browsers.