You have been using border-radius since 2010. It gives you round corners. That is it. One shape. Forever.

CSS just shipped a new property called corner-shape , and it changes the whole game. Same border-radius you already know, but now you control the shape of that corner. Round, flat, scooped inward, notched sharp, six shapes out of the box.

⚠️ Heads up: This is experimental and currently only supported in Chrome Canary (behind a flag). Always check browser compatibility before shipping.

The one rule to remember

corner-shape does nothing without border-radius . Think of it like this: border-radius draws the corner area, and corner-shape decides what lives inside it.

/* This does nothing */ corner-shape : scoop ;

/* This works! */ border-radius : 30 px ; corner-shape : scoop ;

Enter fullscreen mode

Exit fullscreen mode

All 6 shapes, explained

Here are all the keyword values you can use:

Value What it looks like

round The classic smooth curve.…