How to create animated border in CSS similar to Instagram reels circles?

Unfortunately, borders cannot be animated using border propery, but there is another way.

So what you essentialy have to do is actually simple. You need to create two circles - outer and inner one. Outer circle will be slightly bigger than the inner and will have (animated) background, while inner circle will be responsible for the content.

Let's build Instagram reels circle and have border animation.

So this is the HTML structure:

<div class="circle-wrapper">
  <div class="circle">
    <img src="https://www.fcbarcelona.com/photo-resources/2026/01/09/1d7cf663-992b-40e4-8b29-9dff9103abeb/_MGA4181.jpg?width=1200&height=750" />
  </div>
</div>

And this is the CSS:

.circle-wrapper {
 position: relative;
    width: 128px;
    aspect-ratio: 1;
}

.circle-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
     background: conic-gradient(
        red,
        purple,
        red
    );

    animation: bg-change 3s linear infinite;
}

.circle {
  position: absolute;
    inset: 4px;
    border-radius: 50%;
    overflow: hidden;
    background: white;
}
.circle img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}


@keyframes bg-change {
  to {
        transform: rotate(360deg);
    }
}

Since we want to rotate the background gradient, we need to ensure that the inner circle isn't affected by the animation and that's why we need to use ::before. If you need to do something that doesn't affect the inner circle, you can apply flex to the outer circle and then center the inner circle like that.

Anyway, the point is that the difference in size between the outer and the inner circle is your border.