How to Design a Gradient Border with CSS

We’re not going to use the border property, but the end result will be a responsive image with a flexible gradient “border” around it. Let’s get started.

Step 1: Create a container that is always square at every screen size

To make the border responsive and flexible it needs to fit the width of its container while holding its shape. Let’s add our gradient border using <figure> because we’re going to put the border around an image. I think <figure> is more semantic than a <div> but feel free to use that instead.

<figure class="gradient">
</figure>

I’ve added the class .gradient because this element is going to become the gradient border around our image. Now we need to make it a fluid width square. Let’s make sure the width is always at 100% and then we’ll give it a height of 0. Now we can add a height that is equal to the container width using padding-top: 100%. The tag <figure> has a lot of margin by default. Let’s get rid of that by setting all margin values to 0.

.gradient {
  width: 100%;
  height: 0;
  padding-top: 100%;
  margin: 0;
}

Step 2: Add a gradient to the container