How to create a gradient border in CSS

Hey Programmers!. In this blog, we will see how to create a gradient border in CSS. It’s a very simple task and you can use this in your web pages and make it look more attractive and eye-catching.

In order to show the gradients of a border with CSS properties, we can use the border-image property. This property allows us to set gradient values in the same way as the background-image property works.

Besides the border-image property, we should also specify additional properties to actually show border gradient.

• border-width
• border-style
• border-image-source
• border-image-slice

Combine the properties into a shorthand syntax border-width with border-style into border and border-image-source with border-image-slice into border-image.

Syntax (Without Border Radius):

.gradient-border {
  border: 5px solid;
  border-image: linear-gradient(45deg, purple, orange) 1;
}

There’s a drawback while using this approach. We cannot use border-radius property, as it is not supported with the border-image property.

For this approach to work, we need to add a gradient as a background-image for the pseudo-element. On top of that, we also need to set its position to absolute and then set a negative margin, which will represent the border width. Provide it a negative z-index , so that it appears below the main content. And at last , make it inherit border-radius from the main element.

We’ll be using a pseudo-element, but instead of positioning it with z-index, we will use the mask property to clip the background.

First we have to set the element’s background as a gradient. And after that, using the mask property we’ll specify two more gradient backgrounds.

In order to avoid any additional styles for pseudo-element we will use the background-image property in combination with background-clip property.

Let’s write some pieces of code to see what actually is happening here.

HTML

<p class="gradient-border">HELLO WORLD!</p>
<p class="gradient-border-pseudo">HELLO WORLD!</p>
<p class="gradient-border-bg">HELLO WORLD!</p>
<p class="gradient-border-mask">HELLO WORLD!</p>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.gradient-border {
  padding: 10px 20px;
  border: 6px solid;
  background: transparent;
  border-image: linear-gradient(45deg, purple, orange) 1;

  border-radius: 5px;
}

.gradient-border-pseudo {
  position: relative;
  padding: 10px 20px;
  background: #fff;
  margin: 5px;
  
  border-radius: 5px;
}

.gradient-border-pseudo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;

  margin: -5px;
  border-radius: inherit;
  background-image: linear-gradient(45deg, purple, orange);
}

.gradient-border-bg {
  background: linear-gradient(#fff, #fff) padding-box,
    linear-gradient(45deg, purple, orange) border-box;
  border: 5px solid transparent;
  border-radius: 50px;
  padding: 10px 20px;
}

.gradient-border-mask {
  position: relative;
  padding: 15px 20px;
}

.gradient-border-mask::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50px;
  border: 5px solid transparent;
  background: linear-gradient(45deg, purple, orange) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

Output

You can check your output in your browser and see by yourself how we have used gradient bordering around paragraph elements.

Hope the article was interesting and you had fun creating this mini project. Feel free to comment down your queries and suggest anything that we need to add in this article.
Happy coding !