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.
2 border-radius: 2em;
3 corner-shape: squircle;
4}
2 clip-path: polygon(
3 0% 10%,
4 2% 4%,
5 4% 2%,
6 10% 0%,
7 /* ...16 more points */
8 );
9}
10
11/* Or use an SVG mask image */
12/* Neither scales well */
Browser Support for corner-shape
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Your first month is free
Managed WordPress hosting for faster sites.
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.