Tutorial

How To Add Border Images and Gradient Borders with Pure CSS

Updated on April 8, 2021
author

Alligator.io

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:

Example box with a border.

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:

Example box with a border image.

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:

Example box with a linear gradient.

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:

Example box with a radial gradient.

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:

Example box with a conic gradient.

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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
4 Comments


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

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

Thanks. Working well on my blog igniel.com

Hey, it looks like the final example of a rainbow gradient isn’t rendering on Firefox 82 but works on Chrome (latest version).

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel