Linear-gradient as border color

Linear-gradient as border color

ยท

1 min read

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.

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.

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.