John Mwaniki /   15 Apr 2023

How to make color gradient borders with CSS on HTML pages

In web design, a border is a line drawn along the edges of an HTML element. It can be drawn all around the element, on one side (eg. bottom, left, top, etc), or on several sides.

It is easy to draw borders around HTML elements in CSS. All you need is to use the CSS border property and assign a value to the width, border style, and color.

Example

HTML

<div class="mydiv">The quick brown fox jumps over the lazy dog</div>

CSS

.mydiv{
  border: 2px solid green;
}

However, you may be interested in making a color gradient border like the one below, which is not a very straightforward process.

Color gradient borders improve the visual interest and appeal of your website by adding some depth and texture to your page content.

In this article, I will show you how to create color gradient borders with CSS on HTML pages.

How to Create Color Gradient Borders with CSS

There are several ways to create color gradient borders with CSS. We will explore two methods in this article as listed below:

• Using the border-image and border-image-slice properties
• Using the background property

Using the border-image and border-image-slice properties

One way to create a color gradient border is by using the border-image property. It's used in conjunction with the border and border-image-slice properties.

First, we will set the border width and style using the border property as shown below.

.mydiv{
  border: 3px solid;
}

Second, we set a gradient (transition between two or more colors) as the border instead of a solid color. This we do with the help of the border-image property as shown below.

.mydiv{
  border-image: linear-gradient(to right, #2c7a08, #f7d239, #f9910c);
}

In brackets, the first value is the direction of color transition followed by the colors (can be two to several colors), all separated with commas. You can use color codes (as in the example), or names for the colors as you wish. You can change the direction (ie "to right") to a direction of your choice, eg "to bottom" or even to an angle degree (eg "45deg").

But as you may notice at this point, the border will only be visible at the corners (looking like quotes). We will then have to use the border-image-slice property and set its value to "1" to ensure that the gradient is applied to the entire border.

.mydiv{
  border-image-slice: 1;
}

Full Example

Below is a fully working example summarizing all that we have discussed above.

HTML

<div class="mydiv">The quick brown fox jumps over the lazy dog</div>

CSS

.mydiv{
  border: 3px solid;
  border-image: linear-gradient(to right, #2c7a08, #f7d239, #f9910c);
  border-image-slice: 1;
}

Using the background property

Another way of implementing a color gradient border is by creating parent and child HTML elements eg a div inside another div, applying a gradient as the background color of the parent div, and then setting the background color of the inner div to a solid color. The padding between the inner and outer div then acts as the border.

We create two divs and assign them different selectors (ie class or id) as shown below.

<div class="outerdiv">
  <div class="innerdiv">
   The quick brown fox jumps over the lazy dog
  </div>
</div>

Then, we set the background color of the parent div as a color gradient, and with padding equal to the border width we want to accomplish.

This is done similarly to how we implemented the border-image in the first method only that now we substitute it with the background property.

.outerdiv{
  padding: 4px;
  background: linear-gradient(to right, #2c7a08, #f7d239, #f9910c);
}

Lastly, we set the background color of the child div to a solid color, eg to the page background color or to another one of your choice. We can use the background or background-color property.

.innerdiv{
  background: #fff;
}

Full Example

Below is a summary code of what we have discussed above.

HTML

<div class="outerdiv">
  <div class="innerdiv">
   The quick brown fox jumps over the lazy dog
  </div>
</div>

CSS

.outerdiv{
  padding: 4px;
  background: linear-gradient(to right, #2c7a08, #f7d239, #f9910c);
}
.innerdiv{
  background: #fff;
}

That's it! Now you know how to create color gradient borders in HTML using CSS.

Play around with different colors, widths, and directions to come up with something that impresses you.