Setting gradient for border is a very common effect, there are many ideas to achieve this effect, today I know the method listed here for your reference.

1. Useborder-image

CSS provides the border-image attribute to draw complex patterns for the border. Similar to background-image, we can display image and Linear-gradient in the border.

Setting a gradient border with border-image is the simplest method, requiring only two lines of code:

CSS:

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

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

Codepen demo

This approach is simple but has an obvious drawback: it does not support setting border-radius. Several ways to support border-radius are described next.

2. Usebackground-image

The easiest way to draw a gradient background with background-image and cover the middle with a solid color is to use two boxes stacked together, create a gradient background and a padding background for the lower box, and a solid 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>
Copy the code

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*/
}
Copy the code

Codepen demo

The advantage of this approach is that it is easy to understand and compatible, but the disadvantage is that setting the border-radius of the content can be tricky and inaccurate.

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

To fix the border-radius inaccuracy in method 2, use a single element as a gradient background at the bottom level, and set a transparent border and solid color background at the top level (background-clip is required: Padding-box to avoid covering the border of the underlying element), set the same border-radius for both 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>
Copy the code

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);
}
Copy the code

Codepen demo

4. Pseudo-elements and simplification of method 3

We can simplify the HTML structure by replacing div. Border-bg with pseudo-elements.

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>
Copy the code

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);
}
Copy the code

Codepen demo

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

Finally, I think the most elegant method is to use only a single layer element and set background-clip, background-origin and background-image for each of the three attributes. Set two sets of values for each attribute. The first set is used to set the monochrome background in the border. 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>
Copy the code

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);
}
Copy the code

Codepen demo

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