Create Gradient Borders Using 5 Different Tricks

When I have written an article about the gradient I want to explore more about it in other areas how we can use it to make our page more attractive.

Here comes the border, we use standard border more often on our pages, but do you know with different techniques that we can use the gradient as the border.

Let us check out how we do that-

1. Border Gradient with Border-image property

We can add a gradient border using just the border-image property. We are going to use three properties here.  

• border
• border-image-source
• border-image-slice

With border property, we will determine width, style and set the color to transparent.

border: 3px solid transparent;

Note: We need to specify the style to work with it.

We specify a gradient function with the border-image-source property, which might be linear, radial, conical, or even a repeating gradient.

We're going to provide a linear gradient that proceeds from top to bottom by default, but we can adjust it by using keywords or angles, and we're also going to provide a color-stop list.

border: 3px solid transparent;
border-image-source: linear-gradient(45deg, #1fddff, #2C7744, #F0CB35, #fc00ff);  

You can refresh yourself by looking at the types of gradients.

Next, we see that when we specify gradient and solid border only a little gradient appears at each corner. To fix this we must use the border-image-slice property.

border: 3px solid transparent;
border-image-source: linear-gradient(45deg, #1fddff, #2C7744, #F0CB35, #fc00ff);
border-image-slice: 1;

Alternatively, we can use the shorthand property border-image.

border: 3px solid transparent;
border-image: linear-gradient(45deg, #1fddff, #2C7744, #F0CB35, #fc00ff) 1;

Please note that we cannot round or circularize our border with this method.

Gradient border left: 

We can create different sides of the border using different border properties, here we will use border-left and border-image short-cut properties.

border-left: 3px solid transparent;
border-image: linear-gradient(to bottom, #1fddff, #2C7744) 1;

Gradient border top: 

We can create a top border specifying border-top with the border-image property.

border-top: 3px solid transparent;
border-image: linear-gradient(90deg,  #1fddff, #2C7744, #F0CB35, #fc00ff) 1;

Gradient border right:

We can create a right border of our element specifying border-right with the border-image property.

border-right: 3px solid transparent;
border-image: linear-gradient(to bottom, #fc00ff, #F0CB35) 1;

Gradient border bottom:

We can create a bottom border of our element specifying border-bottom with the border-image property.

border-bottom: 3px solid transparent;
border-image: linear-gradient(-90deg, #fc00ff, #F0CB35, #2c7744, #1fddff) 1;

See the Pen Gradient Border by Elpeeda (@Mahe76) on CodePen.

2. Gradient border with wrapping element

Our second method involves wrapping our element within another element, we are using the gradient background with padding to provide more flexibility. It will create a gradient background in the outside element and, with padding, we are adding additional space.

We will use the background-color property on our inner element and match it with the body color. We will use padding for spacing.

This will create a thin line of gradient border.

.outer-wrapper {
  max-width: 250px;
  background-image: radial-gradient(red, yellow);
  padding: 3px;
  position: relative;
}

.inner-element {
  background: #333;
  padding: 25px;
}

See the Pen Border Gradient with Wrapping Element by Elpeeda (@Mahe76) on CodePen.

3. Gradient border with pseudo element

Here we will drop the idea of wrapping element instead we will use pseudo-element to achieve the same effect.

We will use position: relative on the box and draw a gradient in :pseudo element. We will make it the same size, push it behind and reveal only a thin border in the end.

.box {
  margin-top: 1rem;
  width: 250px;
  padding: 25px;
  position: relative;
  background: #fff;
}
.box:before {
  content: ' ';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(red, black);
  z-index: -1;
  margin: -5px;
}

See the Pen Border Gradient by Elpeeda (@Mahe76) on CodePen.

4. Gradient border with background-clip

In this method, we will draw multiple backgrounds layers, the first background sits on top and the last sits on the back. We will use the background-clip property to limit the area where our gradients should draw.

Here we are using padding-box for the first gradient and border-box for the second gradient.

padding-box: this will keep the background within the border.

border-box: it extends the gradient beneath the border.

background-image: 
    linear-gradient(#ededed, #d1d1d1) padding-box,
    linear-gradient(60deg, #20bf55 0%, #01baef 74%) border-box;

For visual effects, we're using a transparent border.

border: 7px solid transparent;

5. Gradient border with background-origin

As I explained above, we will use the background-origin property to implement the same concept as before. With padding-box and border-box, we can position our background inside and beneath the border.

We will use background-repeat: no-repeat to prevent the gradient from repeating

border: 7px solid transparent;
background: 
  linear-gradient(#ededed, #d1d1d1),
  linear-gradient(60deg, #f5d020 0%, #f53803 74%);
background-origin: padding-box, border-box;
background-repeat: no-repeat;

See the Pen Gradient border by Elpeeda (@Mahe76) on CodePen.

Thanks for reading this article. I would love to hear your ideas and thoughts; please leave a remark in the comment box below.