Gradient Borders and Border Images in Pure CSS

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

Can I Use border-image? Data on support for the border-image feature across the major browsers from caniuse.com.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#