How To Add Border Images and Gradient Borders with Pure CSS

Introduction

You may have used CSS borders in your projects. This allowed you to set border-style, border-color, and border-width. Now, modern web browsers allow you to use border images and gradient borders.

In this article, you will explore border-image-source and border-image-slice.

Prerequisites

If you would like to follow along with this article, you will need:

• Some familiarity with CSS is required. You may benefit from How To Build a Website With CSS tutorial series if you need a refresher.
• A modern web browser that supports border-image, linear-gradient, radial-gradient, and conic-gradient.

Setting Up the Example

First, consider a box class that establishes some dimensions and centers the content:

.box {
  width: 400px;
  height: 200px;
  max-width: 100%;
  margin: 1rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

Next, use this class in a div element:

<div class="box">
  Example box without a border.
</div>

Now, you can create a new with-border class:

.with-border {
  border-color: black;
  border-style: solid;
  border-width: 30px;
}

Then, add it to the markup:

<div class="box with-border">
  Example box with a border.
</div>

This code will render the following:

Next, you will build upon this example with border images and gradient borders.

Using Border Images

First, create a new with-border-image class:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

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 refers to a slicing process that divides an image into nine regions. By defining up to four values, you dictate which part of the images will repeat as part of the border.

Then, add it to the markup:

<div class="box with-border-image">
  Example box with a border image.
</div>

This code will render the following:

If you want to venture into fully understanding border-image-slice, here is a great reference article by Codrops and another article by CSS-Tricks.

Using the Shorthand Property

There is a shorthand property to specify the values for both border-image-source and border-image-slice all at once: border-image.

Recall how the previous example used separate properties:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image-source: url(/url/to/some/fancy/image.jpg);
  border-image-slice: 60 30;
}

This is the same example rewritten with the shorthand property:

.with-border-image {
  border-style: solid;
  border-width: 20px;
  border-image: url(/url/to/some/fancy/image.jpg) 60 30;
}

These values are equivalent.

Using Gradient Borders

There are three types of gradients that are supported: linear, radial, and conic. With gradients, you will need to specify a border-image-slice value of 1.

Using a Linear Gradient

Here is a linear gradient:

.with-linear-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(0,143,104), rgb(250,224,66)) 1;
}

Add this to your markup. This code will render the following:

You now have an element with a linear gradient using linear-gradient.

Using a Radial Gradient

Here is an example of a radial gradient:

.with-radial-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

Add this to your markup. This code will render the following:

You now have an element with a linear gradient using radial-gradient.

Using a Conic Gradient

Here is an example of a conic gradient:

.with-conic-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red) 1;
}

Add this to your markup. This code will render the following:

You now have an element with a linear gradient using conic-gradient.

Conclusion

In this article, you explored border-image-source and border-image-slice.

As of 2020, Can I Use border-image? shows 99% of worldwide browsers supporting the border-image property. Take your target audience’s browser usage into consideration when adopting new features.

Unfortunately border-image does not work as expected with border-radius yet. If you want your element to have a border radius and a gradient border, you may be interested in these approaches which use nested elements with a background-image and background-color to give the illusion of a gradient border-image.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

console.log("Hello, world!");