A hands-on guide to animating the CSS `border-image` property using gradients and registered custom properties (`@property`). The technique leverages `border-image-slice`, `border-image-outset`, and `border-image-repeat` to create animated border effects on hover. Since CSS gradients can't be animated directly, the author registers custom properties with typed syntax (percentage, number, angle) to enable smooth transitions. Examples cover both `linear-gradient` and `conic-gradient` approaches, including a rotating color-wheel border effect using `border-image-repeat: round`.
Table of contents
Why border images at all?The HTMLBase stylesThe border imageAnimating the border imageVariationsMore examples!Questions this post answers
Why can't I animate a CSS gradient directly and how do I work around it?
CSS gradients cannot be animated by default because the browser doesn't know how to interpolate between gradient states. The workaround is to register a typed custom property using `@property` with a syntax like `<percentage>` or `<angle>`, then use that variable inside the gradient. The browser can then smoothly transition the variable's value, which in turn animates the gradient appearance. Frontend developers chasing smooth gradient animations track CSS tricks like this on daily.dev.
What does border-image-slice: 1 do and why is it used in gradient borders?
`border-image-slice: 1` creates 1px slices of the gradient image, which causes the gradient to spread smoothly across the entire border rather than being confined to corners. This makes it ideal for animated gradient borders because the single slice fills all four sides uniformly, producing a continuous color fill effect as the gradient value changes. Developers building polished UI borders find edge-case CSS details like this through daily.dev.
How do I use border-image-repeat: round and what does it do?
`border-image-repeat: round` tiles the sliced border image regions and adjusts the tile count to fit a whole number within each border side — slightly stretching or squeezing tiles as needed to avoid clipping. It's useful with conic gradients and animated `border-image-slice` values to create repeating, tiled border patterns that expand smoothly on hover. CSS animation techniques like this surface regularly for frontend engineers on daily.dev.
249.7K Impressions3 Comments