Get Ready For the Powerful CSS border-shape Property! | CSS-Tricks

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 {<br>border-radius: 20px;<br>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 of its potential.

Enter border-shape!

Shaping corners is good, but it’s still fairly limited as far as what we can do with it. Like, what about shaping the whole element instead? That’s what border-shape will do. It accepts the same values as clip-path, including the new shape() function.

So, it has the same job as clip-path? What’s new?

Like with corner-shape, most decorative properties such as border, box-shadow, and outline follow the shape.

clip-path (and mask) will clip/mask the whole element, including the decorations, so having borders is a big NO. That’s a major problem for creating CSS shapes.

The border-shape property is here to solve this issue. Instead of clipping the element, it “shapes” the element, allowing its decorations to follow that shape. In other words, putting borders on CSS shapes will become child’s play!

Not to mention that border-shape is also very easy to use. If you are familiar with clip-path, then you practically have nothing new to learn. Simply replace one property with another, and you are done.

.shape {<br>/* Old code */<br>clip-path: shape() | polygon() | ...;

/* New code */<br>border-shape: shape() | polygon() | ...;

I invite you again to learn more about the shape() function because it’s the value that makes border-shape really powerful. The two really go hand-in-hand.

Now that you know the basic use of the property, shall we start the fun stuff? I are here to push the limits and show you what is possible using border-shape.

Note: Support is limited to Chrome-only for now so check out the next demos using Chrome.

Border-Only Shapes

As I said, the first major advantage here is adding borders to shapes that follow the actual shape, which also means the ability to create border-only shapes. All you have to do is write the following code:

.shape {<br>border: 8px solid red;<br>border-shape: /* your shape code */;

No more hacks and no more headaches!

CodePen Embed Fallback

Most of the shapes are already available in my CSS Shapes collection, so really, making border-only shapes is something you can do with a simple copy/paste. Even some of my online generators are already configured to provide border-only versions of complex shapes, like blobs, wavy lines, and fancy frames, among many, many others.

Cutout Shapes

Let’s take the previous code and update it as follows:

.shape {<br>border: 8px solid red;<br>border-shape: inset(0) /* you shape code */;

You keep the shape code you had, and you add inset(0) at the beginning. Yes, you can have two shape values inside border-shape and the result will be as follows:

CodePen Embed Fallback

From the specification:

The border-shape property accepts either a single or two s:

Single (Stroke mode): The border is rendered as a stroke along the shape’s path, with the stroke width determined by the relevant side’s computed border width. This mode is useful for creating outlined shapes.

Two s (Fill mode) The...