[{"id":395508,"date":"2026-07-07T09:14:00","date_gmt":"2026-07-07T15:14:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=395508"},"modified":"2026-07-07T09:14:05","modified_gmt":"2026-07-07T15:14:05","slug":"get-ready-for-the-powerful-css-border-shape-property","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/get-ready-for-the-powerful-css-border-shape-property\/","title":{"rendered":"Get Ready For the Powerful CSS border-shape Property!"},"content":{"rendered":"\n

So, we recently got the new shape()<\/code><\/a> function (now Baseline!) as well as the corner-shape<\/code><\/a> property. What else could we possibly need as far as making shapes in CSS? Let me tell you: the border-shape<\/code> property!<\/p>\n\n\n\n

\n

shape()<\/code>? corner-shape<\/code>? border-shape<\/code>?! Where did all these come from?<\/p>\n<\/blockquote>\n\n\n\n

If you are not a CSS shape fanatic like me, you probably missed these features when they came out, so let\u2019s give them brief, formal introductions, starting with\u2026<\/p>\n\n\n\n\n\n\n\n

shape()<\/code> and corner-shape<\/code><\/h2>\n\n\n\n

The shape()<\/code> function is a new value for clip-path<\/code><\/a> and offset-path<\/code><\/a> that uses SVG syntax to create CSS shapes much more easily than, say, path()<\/code>. I wrote a four-article series<\/a> exploring this feature, and another article where I explore the creation of complex shapes<\/a>.<\/p>\n\n\n\n

\"Three<\/figure>\n\n\n\n

Speaking about SVG, you can express any SVG shape using shape()<\/code>. Said differently, you can convert<\/em> any SVG shape into a CSS shape and, guess what, I made a converter that does exactly that<\/a>!<\/p>\n\n\n\n

As far as corner-shape<\/code> goes, it\u2019s a property that works in conjunction with border-radius<\/code><\/a>. As its name suggests, it allows you to control the shape of an element\u2019s corner using predefined keywords.<\/p>\n\n\n\n

.corner {\n  border-radius: 20px;\n  corner-shape: round | scoop | bevel | notch | squircle;\n}<\/code><\/pre>\n\n\n\n
\"A<\/figure>\n\n\n\n
It can also be used to create common CSS shapes, like I get into in another article, \u201cCSS Shapes using corner-shape<\/code>.<\/a>\u201d<\/a><\/p>\n\n\n\n
\"CSS-only<\/figure>\n\n\n\n
But is this the corner-shape<\/code> property really useful or even needed? Except for the squircle<\/code> value, most of the shapes can already be created using clip-path<\/code> or mask<\/code>. But what corner-shape<\/code> does that these others can\u2019t is easily add borders and other decorations to those shapes!<\/p>\n\n\n\n
\"Five<\/figure>\n\n\n\n
corner-shape<\/code> will not only shape the corners, but it also supports other properties like border<\/code><\/a> and box-shadow<\/code><\/a>, allowing them to follow the shape rather than the element\u2019s box. This is a game-changer because we all know that adding borders to shapes is a nightmare.<\/p>\n\n\n\n
Support is still not great (Chromium-only as I\u2019m writing this), but it\u2019s a good time to explore it and get an overview of its potential.<\/p>\n\n\n\n\n<\/baseline-status>\n\n\n\n
Enter border-shape<\/code>!<\/h2>\n\n\n\n
Shaping corners is good, but it\u2019s still fairly limited as far as what we can do with it. Like, what about shaping the whole element instead? That\u2019s what border-shape<\/code> will do. It accepts the same values as clip-path<\/code>, including the new shape()<\/code> function.<\/p>\n\n\n\n
\n
So, it has the same job as clip-path<\/code>? What\u2019s new?<\/p>\n<\/blockquote>\n\n\n\n
Like with corner-shape<\/code>, most decorative properties such as border<\/code>, box-shadow<\/code>, and outline<\/code> follow the shape.<\/p>\n\n\n\n
\"Showing<\/figure>\n\n\n\n
clip-path<\/code> (and mask<\/code>) will clip\/mask<\/a> the whole element, including the decorations, so having borders is a big NO<\/em>. That\u2019s a major problem for creating CSS shapes.<\/p>\n\n\n\n
The border-shape<\/code> property is here to solve this issue. Instead of clipping the element, it \u201cshapes\u201d the element, allowing its decorations to follow that shape. In other words, putting borders on CSS shapes will become child\u2019s play!<\/p>\n\n\n\n
Not to mention that border-shape<\/code> is also very easy to use. If you are familiar with clip-path<\/code>, then you practically have nothing new to learn. Simply replace one property with another, and you are done.<\/p>\n\n\n\n
.shape {\n  \/* Old code *\/\n  clip-path: shape() | polygon() | ...;\n\n  \/* New code *\/\n  border-shape: shape() | polygon() | ...;\n}<\/code><\/pre>\n\n\n\n
I invite you again to learn more about the shape()<\/code> function because it\u2019s the value that makes border-shape<\/code> really powerful. The two really go hand-in-hand.<\/p>\n\n\n\n
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<\/code>.<\/p>\n\n\n\n
Note:<\/strong> Support is limited to Chrome-only for now so check out the next demos using Chrome.<\/p>\n\n\n\n\n<\/baseline-status>\n\n\n\n
Border-Only Shapes<\/h2>\n\n\n\n
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:<\/p>\n\n\n\n
.shape {\n  border: 8px solid red;\n  border-shape: \/* your shape code *\/;\n}<\/code><\/pre>\n\n\n\n
No more hacks<\/a> and no more headaches!<\/p>\n\n\n\n