Gradient Border in Pure CSS

Let's get started!

The HTML

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

That's it for the HTML!

The CSS

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

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

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

.container{
  /* 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;
}

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