How to Create a Gradient Border in CSS

Method #1 - Using border-image

Creating gradient border using border-image is the easiest method. This is the most direct and built-in method for creating gradient borders. This method works in all modern browsers (Chrome, Firefox, Safari, Edge).

.box {
  border: 2px solid;
  border-image: linear-gradient(90deg, #c000b3, #00c3ff) 1;
}

Code Explanation

The border-image property allows you to use an image as border. But we can also use linear-gradient with this.

Method #2 - Using linear-gradient background

We can also use background property to create gradient border. But this one is little tricky. We will use two background to create gradient border. It is clean and modern method and also support border-radius property. This method works in all modern browsers (Chrome, Firefox, Safari, Edge).

.box {
  border: 2px solid transparent;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #c000b3, #00ccff) border-box;
}

To make our box more attractive, we can also add a hover effect with some animations.

Code Explanation

We will first create a transparent border.

border: 2px solid transparent;

CSS allows multiple backgrounds, separated by commas. So, we are going to use two background here. The first layer is on top, the second is underneath.

background:
  linear-gradient(#ffffff, #ffffff) padding-box,
  linear-gradient(90deg, #c000b3, #00ccff) border-box;

We will use a solid color (same start and end color) for the first background. This will act as the actual background of the box. The padding-box prevents it from covering the border

We have set second background with a gradient color (two different colors). The border-box allows it to extend under the border