--- title: Animating CSS border-image | daily.dev description: A hands-on guide to animating the CSS `border-image` property using gradients and registered custom properties (`@property`). The technique leverages... canonical: https://daily.dev/posts/animating-css-border-image-qbnttdhkn twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Animating CSS border-image | daily.dev og:description: A hands-on guide to animating the CSS `border-image` property using gradients and registered custom properties (`@property`). The technique leverages... og:url: https://daily.dev/posts/animating-css-border-image-qbnttdhkn og:image: https://api.daily.dev/og/posts/qbNTtDhkn.png og:image:alt: Animating CSS border-image og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Animating CSS border-image **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 7 min read · 159 upvotes · 4 comments ## Summary 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`. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## 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 `` or ``, 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._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > The reduced-motion version should disable the animation and use one static border value. **@devdarlab** · 0 upvotes > Incredible, thanks! --- Tags: [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/animating-css-border-image-qbnttdhkn) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Animating CSS border-image","url":"https://daily.dev/posts/animating-css-border-image-qbnttdhkn","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/animating-css-border-image-qbnttdhkn"},"datePublished":"2026-08-10T16:02:54.041Z","dateModified":"2026-08-10T16:03:38.458Z","description":"A hands-on guide to animating the CSS `border-image` property using gradients and registered custom properties (`@property`). The technique leverages...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/css-border-image-animations.jpg","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/05/css-border-image-animations.jpg","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":4,"discussionUrl":"https://daily.dev/posts/animating-css-border-image-qbnttdhkn","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":159},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":4}],"keywords":"css","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Animating CSS border-image"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/animating-css-border-image-qbnttdhkn","comment":[{"@type":"Comment","text":"The reduced-motion version should disable the animation and use one static border value.","datePublished":"2026-08-15T18:32:36.965Z","url":"https://daily.dev/posts/qbNTtDhkn#c-kBOYzXsWi","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}},{"@type":"Comment","text":"Incredible, thanks!","datePublished":"2026-08-16T20:56:27.879Z","url":"https://daily.dev/posts/qbNTtDhkn#c-f26bWh3cH","author":{"@type":"Person","name":"Devdar","url":"https://daily.dev/devdarlab","image":"https://media.daily.dev/image/upload/s--ss9W2lDk--/f_auto/v1784722362/avatars/avatar_MQEQQjxMDchPWDUISwRJb?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/animating-css-border-image-qbnttdhkn#faq","mainEntity":[{"@type":"Question","name":"Why can't I animate a CSS gradient directly and how do I work around it?","acceptedAnswer":{"@type":"Answer","text":"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 `` or ``, 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."}},{"@type":"Question","name":"What does border-image-slice: 1 do and why is it used in gradient borders?","acceptedAnswer":{"@type":"Answer","text":"`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."}},{"@type":"Question","name":"How do I use border-image-repeat: round and what does it do?","acceptedAnswer":{"@type":"Answer","text":"`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."}}]} ```