The CSS border-image property is one of those features we take for granted. Just look at Temani Afif’s approach that uses a CSS mask (he has a great write-up on it):CodePen Embed FallbackI like border-image because it’s super efficient, especially when it comes to animating border images and gradients. Mainly because it’s easy to replicate the designs across all the borders — it’s automatic — and also because we can “slice” the images using the border-image-slice property. However the border image slices can run across the entire borders, and animating it creates beautiful effects, as you’ll see. Animating the border imageThere’s something else to remember about gradients, specifically about animating them: we can’t by default.