Animated Borders with Tailwind CSS

I saw this tweet by Jhey Tompkins and thought it looked awesome! So, I wanted to recreate it and share how you can do it too using Tailwind CSS. Here are two different ways to animate borders.

Method 1: Offset Path

This method creates a cool radial trail effect that moves around the border. We use an offset-path to move a small animated element along the border of a card. The animation runs infinitely, creating a dynamic border effect with a consistent speed all around the edges.

Code

<div class="relative w-full max-w-sm overflow-hidden rounded-lg p-px">
  <div
    class="border-border bg-card relative z-10 rounded-lg border p-5 text-sm"
  >
    <p>Border Animation using offset-path</p>
  </div>
  <div
    class="animate-trail to-background from-primary absolute z-0 aspect-[2/1] w-16 bg-radial-[at_100%_50%] to-70% [offset-anchor:100%_50%] [offset-path:border-box]"
  ></div>
</div>

CSS

@theme {
  --animate-trail: trail 6s linear infinite;
  @keyframes trail {
    to {
      offset-distance: 100%;
    }
  }
}

Method 2: Conic Gradient

This method uses a conic gradient to create a rotating border effect. A conic gradient is applied to the background, and we animate its rotation to create the illusion of a glowing animated border. Unlike the offset-path method, this effect appears to speed up along the edges and slow down in the middle sections, giving it a more dynamic feel.

Code

<div
  class="from-background to-background animate-border-rotate via-primary w-full max-w-sm rounded-lg bg-conic/[from_var(--border-angle)] from-80% via-90% to-100% p-px"
>
  <div class="bg-card border-border rounded-lg border p-5 text-sm">
    <p>Border Animation using Conic Gradient</p>
  </div>
</div>

CSS

@theme {
  --animate-border-rotate: border-rotate 3s linear infinite;
  @keyframes border-rotate {
    to {
      --border-angle: 360deg;
    }
  }
}

Conclusion

These effects are lightweight, customizable, and easy to add to your UI. The offset-path method keeps the movement smooth and consistent, while the conic gradient method creates a more dynamic effect where the glow appears to change speed.

Try playing around with the gradient colors, animation speeds, and shapes to make it your own!