How to Create CSS Gradient Border Colors

With all the new features in CSS3, we are now able to build image-less websites. In the past, the use of image was inevitable when it comes to showing gradient colors.

Today, it becomes much leaner with the use of CSS3 Gradient Background. In previous posts, we have shown you how to bring CSS3 Gradient into play as a background color in various forms and directions; Linear, Elliptical, and Repeating gradients.

But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Read on to learn how to do this.

First Method

The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works.

Top to Bottom Gradient Border

We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows.

HTML

 <div class="box"></div>
 

CSS

 .box {
 width: 400px;
 height: 400px;
 background: #eee;
 }

To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. We also create 2 rectangles with 2 pseudo-elements — :before and :after — and specify the width in the same size as the box border width.

Position the rectangles on the left and right side of the box and employ linear-gradient through background-image. You can see how this trick turns out below:

Left to Right Border Gradient

Now let’s create a gradient that spans to the left and right in an identical manner to the previous example. Only, this time, we’ll add the box border on left and right side, instead of on top and bottom.

Similarly, we also utilize pseudo-element — :before and :after — to shape 2 rectangles. But, contrary to the previous example, we now place them at the top and bottom side of the box.

Diagonal Border Gradient

Creating diagonal gradient with this trick is, well, technically complicated.

Still, we rely on 2 pseudo-elements, :before and :after and use linear-gradient. This time, however, we will employ 2 linear-gradient within the pseudo-element. And each gradient spans in opposition to one another. See the following source code for the details.

Second Trick

The second method is by using CSS3 border-image property. The border-image property in CSS3 allows us to fill the border with an image as well as CSS3 Gradient.

The browsers support for border-image are quite great; Chrome, Internet Explorer 11, Firefox, Safari, and Opera are all capable to fully render border-image. It should be noted, however, that the border-image will only work on rectangular shapes or boxes.

That means adding border-radius will deviate the border-image output.

The following is the border-image property specification:

 border-image: <source> <slice> <width> <outset> <repeat|initial|inherit>;
 

The <source> is the path that specifies the image used in the border. Herein, we will fill it out with CSS3 Gradient instead. To achieve the same output as in the previous examples, we apply the CSS3 Gradient within the border-image, as follows.

.box {
  width: 250px;
  height: 250px;
  background: #eee;
  border: 20px solid transparent;
  -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
  border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
}

The border-image will show nothing if we don’t specify the border width. So, as you can see above, we add 20px of border width with transparent border color. Then, we set the value of theborder-imageandlinear-gradient along with the vendor prefix for earlier Webkit and Firefox versions.

The addition of border-image-slice shown above will set the inner offsets of the image-border content. This property is required to display the gradient fully within the surrounding area of the box. See the output below:

This method offers more flexibility to adjust the gradient in every possible direction; left to right, top to bottom, diagonal, or at an angle. Below are some examples:

Left to Right Gradient

Diagonal Gradient