How to Creating CSS3 Gradient Border Colors

CSS3 gradient takes the appearance of a website to the next level. It’s an important tool to be used as an image, background of an element, border, or a mask. Its sophisticated features let you create stunning images, not only this, but rounded corners, shadows, and border images can also be created in the most effective manner.

In this article, we are going to discuss about how you can make use of CSS3 gradients for for creating impressive borders. Hopefully, you find the tutorial helpful in building your next project.

First Method

The first method involves the application of pseudo-elements, let’s see how it works:

Top to Bottom Gradient Border

To begin with, let’s take up a simple gradient that expands from top to bottom. To make this, you need to create a box with a div, it should look like this:
HTML

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

CSS

.box {
    width: 768px;
    height: 768px;
    background: #000;
}

You can create a solid border on both the top and bottom side of the box it, so that gradient can be created within the box borders. Also, create 2 rectangles and pseudo-elements, and set them before and after. Make sure that the width of border and the box remains same. After this, place both of the rectangles on the either side of the box and run Linear-gradient via background-image. This is how the screen look as you work with the process.

Left to Right Border Gradient

Now, in this step, we are going to create a gradient that expands from left to right in the same manner as we mentioned above. The only difference is that, here we will add an the box border on both right and left side, instead of top and bottom. Also, following the exact method as we used above, we will use pseudo elements to create 2 rectangles, but will place them on top and bottom, instead of right and left. Now, the screen will look like this:

 

Making a Diagonal Border Gradient

Creating a diagonal border gradient is a bit complicated as compared to the methods which we have mentioned above. Although, here also we need to take the help of pseudo elements, : before and : after and utilize Linear-gradient, to move ahead with the process. In this method, we have added another step of employing 2 linear-gradient within the pseudo-element. You’ll observe that in this step each gradient will spread in a direction that is contradictory of each other. Use the below mentioned source code to get a deeper understanding of the concept.

Second Method

In the second method we will utilize CSS3 border-image property for creating gradient border colors. The benefit of this function is that it enables you fill the border in both image and CSS3 gradient. Since, these are well supported by all the modern browsers including Chrome, Firefox, Internet Explorer, Safari, Opera and so on, the property is extremely useful and is capable of rendering fully border-image. However, the point that you need to consider here is that the border-image is only compatible with rectangular shapes and boxes. Means as soon as you add a border-radius it will provide a contradictory output of border-image.

For a better understanding of the point, we have provided below a border-image property specification:

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

The which you can see in the above specification is actually a path that specifies the particular image to be used in the border. Here, we will need to fit CSS3 gradient to make the process complete. For the desirable results, just apply CSS3 gradient within the border-image, like this:

box{
    width: 350px;
    height: 350px;
    background: #000;
    border: 10px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #FF5732 0%, #A88037 100%);
    -chrome-border-image: -chrome-linear-gradient(top, #FF5732  0%, #A88037 100%);
    border-image: linear-gradient(to bottom bottom, #FF5732 0%, #A88037 100%);
    border-image-slice: 1;
}

Unless until you don’t specify the width of your border, the border-image won’t be able to show you anything. So, as you can see above, we have added 10px of border width by keeping the color combination as well. After this, we set the value of both border-image and border-gradient for firefox as well as Chrome versions.

Also, as you can see, we have also added border-image-slice to set an inner structure of the image-border content. The benefit of using this property is that you can fully display the gradient within the surrounding area of the box. This will show like this:

This way you’ll enjoy more flexibility for adjusting the gradient in a direction you like the most.

Wrapping Up

All said and done, hopefully you enjoyed the tutorial and surely deploy the techniques we have mentioned above for designing awesome shaded borders within the website templates.