How to create border color gradient with CSS3

Tram Ho


With all the new features in CSS3, we can now build websites that restrict the use of images. In the past, using images was inevitable when displaying gradient colors as backgrounds. Today, it becomes a lot more neat with the use of CSS3 Gradient Background. But CSS3 Gradient doesn’t stop to use as background. Did you know you can also use it in borders? Let’s find out how it will be.

The first method:

The first method is by applying Gradient CSS3 in pseudo elements. Pay attention to how it works

Border gradient from top to bottom

We will start with a simple gradient that spreads from top to bottom. To get started, create a block with a div, like this:

To create a slope in the box border, first place a seamless border at the top and bottom of the box. We also create 2 rectangles with 2 dummy elements that specify the width the same size as the box border width. Position the rectangles on the left and right of the box and use linear gradients through the background. You can see how this trick appears below:

The second method

The second method is by using the border-image CSS3 property. The border-image in CSS3 allows us to fill the border with an image as well as CSS3 gradients. The browsers that support border-image are excellent; Chrome, Internet Explorer 11, Firefox, Safari and Opera all have full border-image visibility. However, it should be noted that lice border-image only works on square or rectangular shapes. That means adding border-radius will skew the border-image output. The following are the properties of border-image:

The <source> is the image link used in the border. Here, we will fill it with CSS3 Gradient instead. To achieve the same output as in the previous examples, we applied the CSS3 Gradient in the border-image, as follows.

The border-image will display nothing if we do not specify the width border. So as you can see above, we added 20px width to the border with transparent border color. We then set the value of border-image and linear-gradient along with the vendor prefix for previous versions of Webkit and Firefox.

Adding the image borders shown above will set the internal deviations of the image-content. This attribute is required to display the full gradient in the surrounding area of ​​the box. See the output below:


Share the news now

Source : Viblo