How To Create CSS Gradient Border Colors

With all a new facilities in CSS3, we are now means to build image-less websites. In a past, a use of picture was unavoidable when it comes to arrangement slope colors. Today, it becomes most leaner with a use of CSS3 Gradient Background. In prior posts, we have shown we how to move CSS3 Gradient into play as a credentials tone in several forms and directions; Linear, Elliptical, and Repeating gradients.

But CSS3 Gradient does not stop usually for credentials use. Did we know that you can also implement it within borders? Read on to learn how to do this.

First Method

The initial process is by requesting CSS3 Gradient within pseudo-elements. Well, let’s see how a pretence works.

Top to Bottom slope border

We will start off with a elementary slope that spreads from tip to bottom. To get started, emanate a box with a div, as follows.

HTML

div class="box"/div

CSS

.box 
	width: 400px;
	height: 400px;
	background: 

To form a slope in a box borders, set a plain limit on a tip and bottom side of a box first. We also emanate 2 rectangles with 2 pseudo-elements — :before and :after — and mention a breadth in a same distance as a box limit width. Position a rectangles on a left and right side of a box and occupy linear-gradient by background-image. You can see how this pretence turns out below:

Left to Right Border Gradient

Now let’s emanate a slope that spans to a left and right in an matching demeanour to a prior example. Only, this time, we’ll supplement a box limit on left and right side, instead of on tip and bottom. Similarly, we also implement pseudo-element — :before and :after — to figure 2 rectangles. But, discordant to a prior example, we now place them during a tip and bottom side of a box.

Diagonal Border Gradient

Creating erratic slope with this pretence is, well, technically complicated.

Still, we rest on 2 pseudo-elements, :before and :after and use linear-gradient. This time, however, we will occupy 2 linear-gradient within a pseudo-element. And any slope spans in antithesis to one another. See a following source formula for a details.

Second Trick

The second process is by regulating CSS3 border-image property. The border-image skill in CSS3 allows us to fill a limit with an picture as good as CSS3 Gradient. The browsers support for border-image are utterly great; Chrome, Internet Explorer 11, Firefox, Safari, and Opera are all able to entirely describe border-image. It should be noted, however, that a border-image will usually work on rectilinear shapes or boxes. That means adding border-radius will deviating a border-image output.

The following is a border-image skill specification:

border-image: source cut breadth opening repeat|initial|inherit;

The source is a trail that specifies a picture used in a border. Herein, we will fill it out with CSS3 Gradient instead. To grasp a same outlay as in a prior examples, we request a CSS3 Gradient within a border-image, as follows.

.box
	width: 250px;
	height: 250px;
	background: 
	border: 20px plain 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 uncover zero if we don’t mention a border width. So, as we can see above, we supplement 20px of limit breadth with pure limit color. Then, we set a value of theborder-imageandlinear-gradient along with a businessman prefix for progressing Webkit and Firefox versions.

The further of border-image-slice shown above will set a middle offsets of a image-border content. This skill is compulsory to arrangement a slope entirely within a surrounding area of a box. See a outlay below:

This process offers some-more coherence to adjust a slope in each probable direction; left to right, tip to bottom, diagonal, or during an angle. Below are some examples:

Left to right gradient

Diagonal Gradient

How To Create CSS Gradient Border Colors