Border Svg Using SVG as a Border with CSS

Have you ever wanted a cooler border than what you can get from stacking border elements? Well fear not, today I'm going to walk you through the border-image CSS property.

Here's the image we are going to chop up into a border:

Download it Here if you're following along.

This works with raster images as well, but due to scaling issues it's best to use SVG.

Border-Image

Bare minimum you need to set the border which sets the width of the border image (and acts as a fallback, although browser support is Pretty Good) and the border-image property.

.border{
    border:20px solid;
    border-image:url(border.svg);
}

Obviously, while interesting, this isn't the intended result, so we have a few more steps.

Border-Image-Slice

The border-image-slice property tells the browser where to cut the image to create the different edges. It accepts up to 4 either unitless numbers, or percentages.

The values measure from the top, right, bottom, and left edges of the image (in that order). If one of the units is missing it will mirror the other side.

// These are all the same.
border-image-slice: 0 40;
border-image-slice: 0 40 0 40;
border-image-slice: 0 40 0;

So, back to our example, since the image we're using is symetrical it makes it easy to slice:

.border{
    ...
    border-image-slice:170;
}

Ta Da!! You have a custom image border. There are a couple other border-image properties that can affect how the border reacts to scaling and other things. Check out this article from CSS-Tricks which goes into a little more detail about all of this.

Use Case

Nobody wants a squiggly line on their borders but this is what I was working on when I learned about border images.

The frame and the chalk are part of the SVG image making up the border. This allows the container to retain the look of a chalkboard, regardless of what layout or size the content inside is.

Do you see yourself using this ever? Why or why not?

Comments

[Đăng Tú]

Currently, I'm using Chromium 78.0.3904.108 built for Raspbian and I can say it didn't render as I expect (see screenshot below).

Anyway, using svg with border-image may be really cool but it's not safe in production.

[Rémy 🤖]

I've learned this trick about 5 years ago and I've waited until last week to find a good reason to use it. Most beautiful day of my life :')

[Jack Harner 🚀]

Definitely a rare use case, but I needed to make a chalkboard that scaled based on content layout and screen size, and this was the best way to do that.

[Rémy 🤖]

Not so rare before border-radius was invented, but at the time border-image didn't exist either, so... Yeah pretty rare.