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:
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:
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!
Top comments (0)