How to create a gradient border using CSS? 5 ways to share

How to create a gradient border using CSS? The following article will share with you 5 ways to implement gradient borders with CSS. I hope it will be helpful to you!

Setting a gradient color for the border is a very common effect. There are many ideas to achieve this effect. Today I list the methods I know for your reference. (Learning video sharing:css video tutorial,web front-end)

1. Useborder-image

CSS provided Theborder-imageattribute is used to draw complex patterns for the border. Similar tobackground-image, we can displayimageandlinear- gradient.

Setting the gradient color border throughborder-imageis the simplest method, which only requires two lines of code:

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

https://codepen.io/mudontire/pen/xxLxeZw

Although this method is simple, it has an obvious flaw and is not supported. Setborder-radius. Next, we will introduce several methods to supportborder-radius.

2. Usebackground-image

It should be easiest to usebackground-imageto draw a gradient background and cover the middle with a solid color One method that comes to mind 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.

HTML:

 
 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. 
 

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

https:/ /codepen.io/mudontire/pen/ZEJEZoY

The advantage of this method is that it is easy to understand and has good compatibility. The disadvantage is that setting the contentborder-radiuswill be tricky. and inaccurate.

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

In order to solveborder-radius## in method 2 # For inaccuracies, 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 covering the border of the lower element) , set the sameborder-radiuson the upper and lower layers.

HTML:

 
 
 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. 
 

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

https:/ /codepen.io/mudontire/pen/yLoLrxL

4. Pseudo elements, simplification of method 3

We can use pseudo elements to replace

div.border-bgTo simplify the HTML structure.

HTML:

 
 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. 
 

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

https:/ /codepen.io/mudontire/pen/JjyjVwN

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

background-clipandbackground-origin# respectively. ##,background-imageEach of these three attributes sets two sets of values. The first set is used to set the monochrome background in the border, and the second set is used to set the gradient color on the border.

HTML:

 
 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. 
 

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

https:/ /codepen.io/mudontire/pen/wvqvZZO

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

For more programming-related knowledge, please visit:

Introduction to Programming

! !

The above is the detailed content of How to create a gradient border using CSS? 5 ways to share. For more information, please follow other related articles on the PHP Chinese website!