round border gradient that's not attached to its content CSS

Question

The goal is to reproduce the instagram story circle around the profile picture, meaning it has to be a gradient, not necessarily animated, and there's a space between the image and the circle. I read on stackoverflow to just use padding on the image to make a space between the border and its content, but then I looked for a way to make the border a gradient but the border is squared.

here is the code:

.instaimg {
  border-radius: 150px;
  padding: 10px;
  border: 8px solid transparent;
  border-image: linear-gradient(45deg, red , yellow);
  border-image-slice: 1;
 }

Are there any other way to achieve what I want to do? I looked on codepen but everything I find is animated, but I want something static, not animated... Any help is appreciated, thanks you :)

score -1 · Answer 1 · answered Aug 17 '22 at 18:18

.gradient{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(to right, red, orange);
  padding: 3px;
}

.image{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: white;
}

<div class="gradient">
  <div class="image"></div>
</div>

So instead of a div that has a class "image", use the image that you want.

round border gradient that's not attached to its content CSS

1 Answers1