Get Ready For the Powerful CSS border-shape Property!

So, we recently got the new shape() function (now Baseline!) as well as the corner-shape property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape property! shape() ? corner-shape ? border-shape ?! Where did all these come from? If you are not a CSS shape fanatic like me, you probably missed these features when they came out, so let’s give them brief, formal introductions, starting with… shape() and corner-shape The shape() function is a new value for clip-path and offset-path that uses SVG syntax to create CSS shapes much more easily than, say, path() . I wrote a four-article series exploring this feature, and another article where I explore the creation of complex shapes . Speaking about SVG, you can express any SVG shape using shape() . Said differently, you can convert any SVG shape into a CSS shape and, guess what, I made a converter that does exactly that ! As far as corner-shape goes, it’s a property that works in conjunction with border-radius . As its name suggests, it allows you to control the shape of an element’s corner using predefined keywords. .corner { border-radius: 20px; corner-shape: round | scoop | bevel | notch | squircle; } It can also be used to create common CSS shapes, like I get into in another article, “CSS Shapes using corner-shape . ” But is this the corner-shape property really useful or even needed? Except for the squircle value, most of the shapes can already be created using clip-path or mask . But what corner-shape does that these others can’t is easily add borders and other decorations to those shapes! corner-shape will not only shape the corners, but it also supports other properties like border and box-shadow , allowing them to follow the shape rather than the element’s box. This is a game-changer because we all know that adding borders to shapes is a nightmare. Support is still not great (Chromium-only as I’m writing this), but it’s a good time to explore it and get an overview