CSS corner-shape: Squircle, Scoop, and Notch Corners
Corner shapes beyond rounded borders
Non-circular corner shapes like squircles, scoops, and notches used to require clip-path polygon hacks or SVG masks. Now corner-shape provides named corner styles natively.
.card { clip-path: polygon( 0% 10%, 2% 4%, 4% 2%, 10% 0%, /* ...16 more points */ );}/* Or use an SVG mask image */.card { border-radius: 2em; corner-shape: squircle;}corner shape Browser Support
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Not ready for production without a fallback.
One property
Replace complex polygon hacks or SVG masks with a single corner-shape declaration. Squircle, scoop, notch, bevel. All built in.
Works with border-radius
corner-shape modifies how border-radius curves are drawn. The radius controls the size, the shape controls the curvature.
iOS-style squircles natively
The superellipse (squircle) shape used by Apple's design system is now a CSS one-liner. No more approximations.
How it works
Apple popularized the superellipse (squircle) for app icons, and developers have been trying to replicate it in CSS ever since. The border-radius property only creates circular arcs, so achieving smoother, more continuous curves required clip-path with dozens of polygon points or external SVG masks.
The corner-shape property changes how border-radius draws its curves. Values include squircle (superellipse), scoop (concave curve), notch (straight cut), and bevel (angled cut). It works with existing border-radius values. Just add one line to transform any rounded corner into a different shape.