TL;DR: The first thing I tried when building a gradient border was exactly what you probably tried: border-image: linear-gradient() . It looks clean in the CSS, the gradient shows up, and you feel like you're 30 seconds from done.

📖 Reading time: ~29 min

What's in this article

The Problem: Border-Image Kills Border-Radius

The Background-Clip Trick (Works Today, Everywhere)

Adding the Animation with @keyframes and conic-gradient

The @property Way — Animating Gradient Color Stops Directly

Making It Reusable with CSS Custom Properties

Gotchas I Hit in Production

When to Use Which Technique

A Real Example: Animated Border on a Pricing Card

The Problem: Border-Image Kills Border-Radius

The first thing I tried when building a gradient border was exactly what you probably tried: border-image: linear-gradient() . It looks clean in the CSS, the gradient shows up, and you feel like you're 30 seconds from done. Then you add border-radius: 12px and the corners snap back to a hard right angle.…