--- 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 ### How do I animate a CSS gradient used in border-image since gradients can't be transitioned directly? Register a custom CSS property with @property using syntax like or , an initial value, and inherits: false, then reference that property inside the gradient function used for border-image-source. Because the browser now knows the property's type, it can interpolate it, so transitioning the property on :hover (or via transition-property) animates the gradient and creates a drawing-in border effect. _Anyone polishing hover-state border effects can bookmark CSS techniques like this one through daily.dev._ ### What does the border-image-outset property do in CSS? Border-image-outset pushes the rendered border image away from the element's box, closing the visual gap that can appear between an animated border and the element's background. It is set alongside border-image-width and border-image-slice, for example border-image-outset: 5px, to align the border image flush against the content it surrounds. _Developers refining border-image layouts can track practical CSS property breakdowns via daily.dev._ ### What does border-image-repeat: round do differently from the default? Border-image-repeat: round tiles the sliced border image so that a whole number of tiles fits within each border edge, stretching or squeezing the image slightly when an exact fit is not possible, rather than clipping or leaving gaps. It pairs well with animated slice values, such as increasing border-image-slice from 1 to 20, to create repeating patterned border effects. _Those experimenting with tiled border animations can follow deep-dive CSS explainers 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! ## Similar posts on daily.dev - [An animated radial gradient mask over text in CSS](https://daily.dev/posts/an-animated-radial-gradient-mask-over-text-in-css-ob8mcbski) · Cassidy's blog · 76 upvotes · 11 comments - [Get Ready For the Powerful CSS border-shape Property\!](https://daily.dev/posts/get-ready-for-the-powerful-css-border-shape-property--7ybzkqgpd) · CSS-Tricks · 131 upvotes · 12 comments - [Complex border-only Shapes with Gradient Coloration](https://daily.dev/posts/complex-border-only-shapes-with-gradient-coloration-ixetj7hyp) · CSS Tip · 1 upvotes · 0 comments --- 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-09-14T06:53:41.309Z","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":"How do I animate a CSS gradient used in border-image since gradients can't be transitioned directly?","acceptedAnswer":{"@type":"Answer","text":"Register a custom CSS property with @property using syntax like or , an initial value, and inherits: false, then reference that property inside the gradient function used for border-image-source. Because the browser now knows the property's type, it can interpolate it, so transitioning the property on :hover (or via transition-property) animates the gradient and creates a drawing-in border effect. Anyone polishing hover-state border effects can bookmark CSS techniques like this one through daily.dev."}},{"@type":"Question","name":"What does the border-image-outset property do in CSS?","acceptedAnswer":{"@type":"Answer","text":"Border-image-outset pushes the rendered border image away from the element's box, closing the visual gap that can appear between an animated border and the element's background. It is set alongside border-image-width and border-image-slice, for example border-image-outset: 5px, to align the border image flush against the content it surrounds. Developers refining border-image layouts can track practical CSS property breakdowns via daily.dev."}},{"@type":"Question","name":"What does border-image-repeat: round do differently from the default?","acceptedAnswer":{"@type":"Answer","text":"Border-image-repeat: round tiles the sliced border image so that a whole number of tiles fits within each border edge, stretching or squeezing the image slightly when an exact fit is not possible, rather than clipping or leaving gaps. It pairs well with animated slice values, such as increasing border-image-slice from 1 to 20, to create repeating patterned border effects. Those experimenting with tiled border animations can follow deep-dive CSS explainers on daily.dev."}}]} ```