How to Animate Dashed Border with CSS

By . in Coding. Updated on .

Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like CSS-gradient borders, SVG borders, multiple borders and more to mimic and upgrade the looks of box borders and its animations.

Today we’ll look into a simpler hack for dashed borders: dashed border animation. The animated dashed border will be created using only outline and box-shadow, leaving no fuss about fallbacks, since outline is supported from IE8 onwards. That way the user will still be able to see the borders unlike when SVG or gradient is used. With this you can also create bicolored dashes. Let’s take a look.

Creating The Borders

We will first create the borders. For this, we’ll use a dashed outline and a box shadow.

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    ...
 }

The outline will need all of its values; width, type and color. The box-shadow only needs the value for spread which should be the same as the outline’s width and its color. Both the outline and the box-shadow together will create the effect of two-colored dashes.

You can then adjust the box’s width or height for your desired border look at the corners.

Animating The Borders

For our first animation example, we’ll add CSS keyframe animations to a set of banners with the borders animating continuosly, gaining attention. For the animation effect we’ll simply swap the colors of the outline and box shadow.

@keyframes animateBorder {
  to {
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
  }
}

You can target the color of the outline using outline-color longhand property, however for box shadow you’ll have to give all the values to the shorthand property for now.

Read more: CSS Shorthand vs. Longhand – When to Use Which

Once the animation is ready, add it to the box.

.banners{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
    animation: 1s animateBorder infinite;
    ...
}

Transitions On The Borders

For the transition example we’ll add borders to pictures and animate those on hover. You can also change the border size for different effects.

.photos{
    outline: 20px dashed #006DB5;
    box-shadow: 0px 0px 0px 20px #3CFDD3;
    transition: all 1s;
    ...
}

.photos:hover{
    outline-color: #3CFDD3;
    box-shadow: 0 0 0 20px #006DB5;
}

Now, hover over these images to see your CSS dashed borders in all its animated glory.

And, that’s a wrap. You can try replacing dashed borders with dotted ones, but the effect might not be asas good. You can also change the outline type during animation for a few more effects.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail