TL;DR: The thing that trips up almost everyone is discovering that border-image simply refuses to respect border-radius . This isn't a browser bug you can work around — it's specified behavior in CSS. 📖 Reading time: ~30 min What's in this article The Problem: Why Gradient Borders Are Annoyingly Hard in CSS Approach 1: The Pseudo-Element Trick (Works Everywhere Today) Approach 2: The CSS @property Trick (Cleaner, But Requires Chrome 85+ / Firefox 128+) Making It Work on Rounded Cards Without Breaking Performance: Is Animating a Gradient Actually Okay? Real-World Variations You'll Actually Need Integrating Into a Real Component (React/Vue/Vanilla) Browser Testing Checklist Before You Ship The Problem: Why Gradient Borders Are Annoyingly Hard in CSS The thing that trips up almost everyone is discovering that border-image simply refuses to respect border-radius . This isn't a browser bug you can work around — it's specified behavior in CSS.…