Borders in CSS are old news, but maybe you didn’t know that border images and gradient borders are also possible with CSS now, thanks to two properties: border-image-source and border-image-slice.
Border Images
You can use images that replace the default border style. Here’s a simple example. First, our markup:
<div class="box box-1">Just a box! 😄</div> And then the styles for our box:
.box { width: 400px; height: 200px; max-width: 100%; background: var(--bg2); margin: 1rem auto; display: flex; align-items: center; justify-content: center; font-size: 2rem; } .box-1 { border: 20px solid; border-image-source: url(/url/to/some/fancy/image.jpg); border-image-slice: 60 30; } Just a box! 😄
You’ll notice that there’s still needs to be a regular border applied to the element because the border image replaces the regular border style.
border-image-source specifies the source image, which can be a URL to a raster or vector-based image (SVG) or a data URI.
border-image-slice is also needed in order for the desired effect to be achieved. That one can be a little complicated to fully grasp, but the gist of it is that behind the scenes the engine slices the image into a 3 X 3 grid, with the center section being transparent by default. border-image-slice is used to specify how the image is distributed on that grid. It can take up to 4 values which can be numerical or percentage values. Here’s a great reference article by Codrops and another one by CSS-Tricks if you want to venture into fully understanding border-image-slice.
Shorthand property with border-image
There’s a shorthand property to specify the values for both border-image-source and border-image-slice all at once: border-image. Here’s the same example, but using the shorthand:
.box-1 { border: 20px solid; border-image: url(/url/to/some/fancy/image.jpg) 60 30; } Gradient Borders
Since gradients in CSS are really generated images, creating gradient borders is as simple as using a linear, radial or conic gradient in place of a regular image source.
First, a linear gradient border:
.box-2 { border: 10px solid; border-image-source: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)); border-image-slice: 1; } Linear gradient! 😄
As you’ll notice, the slicing on such gradients is much simpler and a simple value of 1 will do. So, using the shorthand, we get:
.box-2 { border: 10px solid; border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1; } Here’s the same example, but as a radial gradient:
.box-3 { border: 10px solid; border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1; } Radial gradient! 😄
And then finally a conic gradient for good measure, here with all the hues of the color wheel to create a rainbow gradient:
.box-4 { border: 10px solid; border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1; } I ❤️ 🌈
What About Border Radius?
Unfortunately border images can’t have a radius just yet, so if you want your element to have a border radius and a gradient border, you’ll have to resort to using a workaround that probably involves another HTML element.
Browser Support: As of 2020, Can I Use border-image? shows 99% of worldwide browsers supporting the border-image property.