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

When I first started building websites, rounded corners required five background images, one for each corner, one for the body, and a prayer that the client wouldn’t ask for a different radius. Then the border-radius property landed, and the entire web collectively sighed with relief. That was over fifteen years ago, and honestly, we’ve been riding that same wave ever since. Just as then, I hope that we can look at this feature as a progressive enhancement slowly making its way to other browsers. I like a good border-radius like any other guy, but the fact is that it only gives us one shape. Round. That’s it. Want beveled corners? Clip-path. Scooped ticket edges? SVG mask. Squircle app icons? A carefully tuned SVG that you hope nobody asks you to animate. 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. Well, the new corner-shape changes all of that. What Is corner-shape ? 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 (snipped corners), scoop : an inverted curve, creating concave corners, notch : sharp inward cuts, square : effectively removes the rounding, overriding border-radius . And you can set different values per corner, just like border-radius : *corner-shape: bevel round scoop squircle; /* top-left, top-right, bottom-right, bottom-left */ You can also use the superellipse() function with a numeric parameter for fine-grained control. .element { border-radius: 25