Animating CSS border-image

The guide walks readers through a concrete example—a 150 px‑wide card with a Batman‑themed background—showing how to replace a plain border with a linear‑gradient source, then animate its reveal via a custom --p variable registered with @property. By setting border‑image‑slice to 1 and border‑image‑width to 5 px, the author creates a thin, responsive outline that can be offset from the element using border‑image‑outset. Hovering the card drives --p from 0 % to 100 %, causing the red segment of the gradient to sweep across the perimeter, mimicking a hand‑drawn stroke. The tutorial then swaps the linear gradient for a conic gradient, registers two additional custom properties— --n for slice depth and --a for rotation angle— and animates both with a 0.6‑second transition. The use of border‑image‑repeat: round ensures the sliced pattern tiles evenly, while the conic gradient’s angle rotates a full circle on hover, producing a “color‑wheel” effect. Throughout, the author contrasts this approach with a CSS‑mask technique popularized by Temani Afif, arguing that border‑image remains more performant because the browser can reuse a single image slice across all four sides without extra compositing.

This technique arrives as browsers solidify support for the CSS @property at‑rule, which enables native animation of user‑defined properties without JavaScript. Developers seeking lightweight, cross‑browser visual flair can now rely on pure CSS to achieve effects that previously required SVG or canvas hacks. The method also dovetails with the broader push toward design systems that favor declarative styling; by encapsulating animation parameters in custom properties, teams can expose simple tokens to designers while preserving a single source of truth for border aesthetics. As more sites adopt dark‑mode and high‑contrast palettes, animated borders offer an unobtrusive way to draw attention to interactive elements without inflating page weight.

Looking ahead, the main risk lies in inconsistent implementation of @property across older browsers, which could force fallback styles or polyfills. Additionally, animating border‑image may increase paint complexity on high‑resolution displays, potentially affecting performance on low‑end devices. Developers should monitor browser release notes for any changes to gradient interpolation rules and test the technique under varying device pixel ratios. Finally, the community may explore combining border‑image animation with CSS container queries to adapt border thickness or slice count responsively.