The usual way of implementing a border is to apply border properties to an element.

Here is an example of using a solid color for a border. Check the result page to see the demo.

Styling a border like this works, but what if you want a blend of colors for the border?

So here is the fun part, use CSS gradient. CSS gradients let you display smooth transitions between two or more specified colors.

We will focus on the linear-gradient()

The Linear-Gradient CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.

Linear-gradient is mostly used for backgrounds. But here we will use it for border color.

Examine the demo below

What changed?

Instead of specifying a border color, we specified two linear-gradient background colors for that box in the CSS.
- The first linear-gradient background color will be applied to the padding-box.
- The second linear-gradient background colour will be applied to the border-box.
- Set the border of the box to transparent so that the background colour we clipped to the border-box and padding-box will show instead of a solid solid color.