How to create gradient borders in CSS.

To apply a gradient to a border, the most straightforward approach is to use the border-image property (similarly to how it's done with background gradients):

.btn-gradient-1 {
  border-width: 4px;
  border-style: solid;
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
}

The '1' after the linear-gradient declaration is the border-image-slice value. By using 1, we specify we want a single border region.

The downside of this approach is that you can't combine border-image with border-radius. 🤷‍♂️

.btn-gradient-1 {
  /* .. */
  border-image: linear-gradient(to right, darkblue, darkorchid) 1;
  border-radius: 50em; /* 👈 not working */
}

Alternative approach #

There's an alternative approach, based on the background-clip property, that is compatible with the border-radius property.

.btn-gradient-2 {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, darkblue, darkorchid) border-box;
  border-radius: 50em;
  border: 4px solid transparent;
}

The 'padding-box' and 'border-box' values specified after the linear gradients represent the background-clip values.

The first linear gradient is limited to the padding box (i.e., all the content of the element, except the borders). It's a 'fake' gradient because we're using the same color twice; we're using it to mask the second background gradient with the background color.

The second gradient sits below the first one and is used to apply the desired gradient colors. Unlike the first one, the second gradient covers the border area (background-clip: border-box).

Finally, the transparent border is required to separate the border-box from the padding box (otherwise they would be identical and the first gradient would completely cover the second one).

Demo #

Here's a demo of both approaches: