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

"We've been hacking around the limitations of border-radius for years, and those hacks come with real trade-offs: borders don't follow clip-paths, shadows get cut off, and you end up with brittle code that breaks the moment someone changes a padding value."

"The corner-shape property is a companion to border-radius. It doesn't replace it; it modifies the shape of the curve that border-radius creates. Without border-radius, corner-shape does nothing. But together, they're a powerful pair."

"The property accepts these values: round (the default, same as regular border-radius), squircle (a superellipse, the smooth Apple-style rounded square), bevel (a straight line between the two radius endpoints), scoop (an inverted curve, creating concave corners), and notch (sharp inward cuts)."

For over fifteen years, border-radius has been the standard for rounded corners on the web. However, it only produces one shape: round corners. Developers needing alternative corner styles have relied on fragile workarounds including clip-path, SVG masks, and complex SVG implementations. These solutions create significant trade-offs: borders don't follow clip-paths, shadows get cut off, and code becomes brittle and breaks easily when padding values change. The new corner-shape property serves as a companion to border-radius, modifying the curve shape it creates. It accepts multiple values including squircle for Apple-style rounded squares, bevel for snipped corners, scoop for concave corners, and notch for sharp inward cuts, providing native CSS solutions without the previous limitations.

Read at Smashing Magazine