Gradient Border in Pure CSS

It's been a while since I last made an post in the Pure CSS series, but now it's time to add another entry to it.

This post will show you how to create a gradient border in Pure CSS. The "Pure CSS" part mainly refers to not having to use a third-party tool to create it. It is possible to set a border-image in CSS, and have the value be an image with a gradient. That's a good approach, but I'm going to show you how to do it without leaving your editor.

Let's get started!

The HTML

The HTML will be straight forward. It is simply a div wrapping around an img.

<div class="container">
  <img 
       class="content"
       src="https://pbs.twimg.com/profile_images/1254684051212034050/i4Y8X9J4_400x400.jpg">
</div>

The container is the most important element here and it could have any element inside it, but for this demonstration we'll use an img element that displays my profile image from Twitter.

That's it for the HTML!

The CSS

This is where it gets interesting. The majority of the CSS is applied to the .container, the content is simply there to fill container with some… Well, content!

.container{
  /* Set the size of the container */
  --size: 100px;
}

We start by creating a --size property. This is called a custom property, or variable, in CSS. This will be used later to set the width and height of the .container.

.container{
  /* Center the container's content */
  display: grid;
  place-items: center;
}

The CSS above centers the content of the container, whatever it may be. We are using display: grid; in this example, but there are other ways of centering elements in CSS. This is just a simple and modern way to center child elements both vertically and horizontally.

.container{
  /* Make the container round */
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
}

We have now turned the container into a circle. It uses border-radius to round the corners, and --size to set the width and height to the same value. You don't have to make the container round, the gradient would work with a square container too, we are just doing it for stylistic purposes here.

.container{
  /* Add the gradient */
  background: linear-gradient(purple, blue, purple);
}

This is what you've been waiting for, the gradient! We use a linear-gradient rather than a radial-gradient. This is because the radial-gradient wouldn't be visible behind the content. But, by all means, try to use a radial-gradient too. It might just be the effect you are looking for. In any case, this example uses a gradient that goes from purple at the top, blue in the middle, and then purple, again, at the bottom.

You can, of course, use whatever colors you want and have the gradient in different angles. Take a look at the MDN reference for CSS gradient to learn more.

Now, let's move onto the .content.

.content{
  /* Leave 10% of the parent to act as borders */
  width: 90%;
  height: 90%;

  /* Use the same border-radius as the parent */
  border-radius: inherit;
}

As you can see, the CSS for the content is rather simple. We set the width and height to 90% so that it lets the background show around it. This is what creates the border effect. Lastly, we simply set the .content to have the same border-radius as its parent.

Putting it all together

That's all the CSS and HTML done. This is how the code looks:

The HTML

<div class="container">
  <img 
       class="content"
       src="https://pbs.twimg.com/profile_images/1254684051212034050/i4Y8X9J4_400x400.jpg">
</div>

The CSS

.container{
  /* Set the size of the container */
  --size: 100px;

  /* Center the container's content */
  display: grid;
  place-items: center;

  /* Make the container round */
  border-radius: 50%;
  width: var(--size);
  height: var(--size);

  /* Add the gradient */
  background: linear-gradient(purple, blue, purple);
}
.content{
  /* Leave 10% of the parent to act as borders */
  width: 90%;
  height: 90%;

  /* Use the same border-radius as the parent */
  border-radius: inherit;
}

The result

And this is how the result turned out:

Conclusion

That's how you make a gradient border without third-party tools. It's not strictly a border, but since borders have no semantic meaning, we don't actually have to use the border rule to create them.