Animating a gradient border in CSS
Tags: css
Published: 2021-12-02 05:58:24

A while ago, I made this cool [animated Multi-colour text effect in CSS](https://daily-dev-tips.com/posts/multi-colored-text-in-css/).
I was re-looking this article and thought we could use some of these learnings to make a super cool animated border effect!

The end result for today will be this cool animated border gradient.

{% codepen https://codepen.io/rebelchris/pen/porBNgg %}

## Setting up the basis for a gradient border

Gradient borders in CSS are tricky, as we need to leverage the `border-image` property for this. It's not a super well know property and comes with some caveats.

However, let's give it a go.

We'll first make a single div in our HTML setup.

```html
<div></div>
```

Let's give this div a big width and height so we can have a good demo.

```css
div {
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
}
```

This will create a div that is half the width of our viewport. And give this div a `1rem` border.

The next thing we want to add is the actual border-image. We can pass an actual image or set SVGs or a gradient as this gets rendered as an image.

```css
div {
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
  border-image: linear-gradient(0deg, #12c2e9, #c471ed, #f64f59) 1;
}
```

We should now have our basic border setup, and it should look like this.

![CSS Border image](https://cdn.hashnode.com/res/hashnode/image/upload/v1637493141958/AcfbgjnBU.png)

Pretty close already. Now we just need to animate this!
Let's use some [CSS variables](https://daily-dev-tips.com/posts/how-to-use-css-vars/) to make the position animatable.

```css
div {
  --angle: 0deg;
  width: 50vmin;
  height: 50vmin;
  border: 1rem solid;
  border-image: linear-gradient(var(--angle), #12c2e9, #c471ed, #f64f59) 1;
}
```

This introduces a new `--angle` variable. This is nothing that CSS knows about but our own variable.

We can then add a basic animation query as well.

```css
animation: 5s rotate linear infinite;
```

And the rotate animation will look like this:

```css
@keyframes rotate {
  to {
    --angle: 360deg;
  }
}
```

However, nothing will happen!
The value will change, but since it's not a know CSS variable, we need to define it as a changeable property.

```css
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
```

And now we got our working animated border in CSS!

## Browser Support

For browser support, we have to technically look at multiple properties. Still, this one below should give you an excellent example of how good the support is.

<picture>
<source type="image/webp" srcset="https://caniuse.bitsofco.de/static/v1/border-image-1637493765759.webp">
<source type="image/png" srcset="https://caniuse.bitsofco.de/static/v1/border-image-1637493765759.png">
<img src="https://caniuse.bitsofco.de/static/v1/border-image-1637493765759.jpg" alt="Data on support for the border-image feature across the major browsers from caniuse.com">
</picture>

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)