DEV Community

Cover image for Using SVG as a Border with CSS

Using SVG as a Border with CSS

Jack Harner 🚀 on August 07, 2018

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 bo...
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 🚀

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.