5 ways to implement gradient borders in CSS

It is a very common effect to set a gradient color to the border. There are many ideas to achieve this effect. Today, I have listed the methods I know here for your reference.

1. Use border-image

CSS provides the border-image property to draw complex patterns for the border, similar to the background-image , we can display image and linear-gradient in the border.

Setting the gradient color border through border-image is the easiest way, only two lines of code are needed:

CSS:

div {
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

/* 或者 */
div {
  border: 4px solid;
  border-image-source: linear-gradient(to right, #8f41e9, #578aef);
  border-image-slice: 1;
}

Codepen demo

Although this method is simple, it has an obvious flaw. It does not support setting border-radius . Next, we will introduce several ways to border-radius

2. Use background-image

Using background-image draw a gradient background and covering the middle with a solid color should be the easiest way to think of. The idea is to use two boxes to superimpose, set the gradient background and padding for the lower box, and set the pure color background for the upper box. .

HTML:

<div class="border-box border-bg">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione
    necessitatibus numquam sunt nihil quos saepe sit facere. Alias accusamus
    voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  width: 300px;
  height: 200px;
  margin: 25px 0;
}

.border-bg {
  padding: 4px;
  background: linear-gradient(to right, #8f41e9, #578aef);
  border-radius: 16px;
}

.content {
  height: 100%;
  background: #222;
  border-radius: 13px; /*trciky part*/
}

Codepen demo

The advantage of this method is that it is easy to understand and has good compatibility. The disadvantage is that the border-radius setting content will be more tricky and inaccurate.

3. Two-layer elements, background-image , background-clip

In order to solve the border-radius Method 2, you can use a separate element as a gradient background and place it on the bottom layer, and set a transparent border and a solid background on the upper layer (you need to set background-clip: padding-box to avoid covering The border of the lower element), set the same border-radius upper and lower layers.

HTML:

<div class="border-box">
  <div class='border-bg'></div>
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/ 
  background: linear-gradient(to right, #8f41e9, #578aef);
}

Codepen demo

4. Simplification of pseudo-element and method 3

We can replace div.border-bg with pseudo-elements to simplify the HTML structure.

HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  position: relative;
  background-color: #222;
  background-clip: padding-box; /*important*/
}

.border-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  margin: -4px;
  border-radius: inherit; /*important*/
  background: linear-gradient(to right, #8F41E9, #578AEF);
}

Codepen demo

5. Single layer elements, background-clip , background-origin , background-image

Finally, I think the most elegant method is to use a single-layer element, and set the background-clip , background-origin , background-image , each of which sets two sets of values. The first set is used to set the border. Monochrome background, the second group is used to set the gradient on the border.

HTML:

<div class="border-box">
  <div class="content">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste ratione necessitatibus numquam sunt nihil quos
    saepe sit facere. Alias accusamus voluptate accusantium facere fugiat animi temporibus adipisci! Corporis,
    accusamus tempora.
  </div>
</div>

CSS:

.border-box {
  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}

Codepen demo

At present, you can think of these 5 methods. I recommend using 4 and 5 first. If there are other better methods, please add them.