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