How to make a gradient border with CSS

2020-03-20

#gradient-border-example .gradient-border {
	border-width: .5em;
	border-style: solid;
	border-image-source: linear-gradient(315deg, aquamarine, darkmagenta);
	border-image-slice: 1 1 1 1;
}

As the example snippet shows, an element can be given a border with a linear-gradient by combining a few properties. The purpose of border-width and border-style is to make the border visible in the first place. Then, the border-image-source is set to a linear-gradient function. Lastly, border-image-slice is set to 1 to ensure the background appears on all sides in the order of top, right, bottom, left. If any of these 1s were to be changed to a 0, the gradient would disappear on the corresponding side, leaving the border there taking up the same width but completely transparent.

The individual properties of the border were set explicitly in the example above; however, the same effect can be achieved using shorthand for the border and border-image properties:

.gradient-border {
	border: .5em solid;
	border-image: linear-gradient(315deg, aquamarine, darkmagenta) 1;
}

In this case, one might ask what happened to the other three 1s for the border-image-slice value. The 1 that is given at the end of the border-image value represents the value for all four sides of the border image; similarly to how how margin: 1px is short for setting the top, right, bottom, and left margins all to 1px in one go.