Setting gradient colors for borders is a very common effect, and there are many ideas to achieve this effect.
1. Use border-image
CSS provides the border-image attribute for drawing complex patterns on the border. Similar to the background-image, we can display image and linear-gradient in the border.
Setting the gradient border through border-image is the simplest method, requiring only two lines of code:
<style>
body {
background-color: #000;
}
.box {
display: inline-block;
margin: 100px;
width: 200px;
height: 100px;
line-height: 100px;
font-size: 20px;
color: #fff;
text-align: center;
}
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;
}
</style>
<div class="box">Borders</div>
Although this method is simple, it has an obvious flaw. It does not support setting border-radius. Next, we will introduce several methods to support border-radius.
2. Use background-image
Using background-image to draw a gradient background and covering the middle with a solid color should be the easiest method to think of.
The idea is: use two boxes to overlap, set a gradient background and padding for the lower box, and set a solid color background for the upper box.
<div class="border-bg 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>
<style>
body {
background-color: #000;
}
.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;
color: #fff;
}
</style>
The advantage of this method is that it is easy to understand and has good compatibility. The disadvantage is that setting the border-radius of the content will be tricky and inaccurate.
3. Two-layer elements, background-image, background-clip
In order to solve the problem of inaccurate border-radius in method 2, you can use a separate element as the gradient background on the bottom layer, and set a transparent border and solid color background on the upper layer (you need to set background-clip: padding-box to avoid Cover the border of the lower element), and set the same border-radius on the upper and lower layers.
<div class="border-box">
<div class="border-bg"></div>
<div>
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>
<style>
body {
background-color: #000;
padding: 200px;
}
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
color: #fff;
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box;
}
.border-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit;
background: linear-gradient(to right, #8f41e9, #578aef);
}
</style>
4. Pseudo elements and simplification of method 3
We can replace div.border-bg with pseudo-element to simplify the HTML structure.
<div class="border-box">
<div>
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>
<style>
body {
background-color: #000;
padding: 200px;
}
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
color: #fff;
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box;
}
.border-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit;
background: linear-gradient(to right, #8F41E9, #578AEF);
}
</style>
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 three attributes of background-clip, background-origin, and background-image respectively. Set two sets of values for each attribute. The first set Used to set the monochrome background within the border, and the second group is used to set the gradient color on the border.
<div class="border-box">
<div>
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>
<style>
body {
background-color: #000;
padding: 200px;
}
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
color: #fff;
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);
}
</style>