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.…