I stumbled upon the CSS property corner-shape recently and it’s pretty cool. It allows you to specify the shape of an element’s corners and works with border-radius.

I threw together this demo to show it in action:

See the Pen corner-shape beveled and rounded navbar by Cassidy (@cassidoo) on CodePen.

I remember in the olden days (as in like… 10 years ago, as evidenced by this old Pen of mine), making beveled corners involved a bunch of pseudo-elements and triangles to fake a bevel. It’s so so cool that you can “just” do this now with a couple lines of CSS!

In addition to beveled corners, it also lets you do scoops, notches, and even squircles:

See the Pen Rounded corners vs. Squircle by Cassidy (@cassidoo) on CodePen.

There’s also a superellipse function, which defines any of the values you can pass to corner-shape numerically, which could make for some interesting animations and transitions.

Definitely play with it if you get a chance! I think there’s some cool CSS “drawing” things you can do as you dabble with the different shapes. corner-shape does have fairly limited availability currently (Safari and Firefox don’t support it yet at the time of writing), but hopefully that’ll change soon!