DEV Community

loading...
Cover image for Using SVG as a Border with CSS

Border Svg Using SVG as a Border with CSS

jackharner profile image Jack Harner 🚀 ・2 min read

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:

Heres Our Fancy 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);
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

Slicing the image

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

.border{
    ...
    border-image-slice:170;
}
Enter fullscreen mode Exit fullscreen mode

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.

Back To School Chalkboard

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?

Discussion (4)

pic
Editor guide
Collapse
ngdangtu profile image
Đă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.

Collapse
xowap profile image
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 :')

Collapse
jackharner profile image
Jack Harner 🚀 Author

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.

Collapse
xowap profile image
Rémy 🤖

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