Collection of hand-picked free HTML and CSS border animation code examples. Update of September 2018 collection. 6 new examples.

22 CSS Border Animations

Collection of hand-picked free HTML and CSS border animation code examples. Update of September 2018 collection. 6 new examples.

Related Articles

  1. CSS Border Examples

Author

  • Jesse Breneman

Made with

  • HTML / CSS (SCSS)

About the code

Rotating Border

Rainbow rotating border in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Animating border-radius

mix-blend-mode: luminosity & animating border-radius on CSS. Resize the container to see how the color of the shapes and text in the block changes.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • kang

Made with

  • HTML / CSS

About the code

Border Animation

Border animation using clip-path.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Nick lewis

Made with

  • HTML / CSS (Stylus)

About the code

Animating border-radius

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Border Animation CSS

Author

  • uiswarup

Made with

  • HTML / CSS

About the code

Border Animation CSS

Pure CSS border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

Author

  • Comehope

Made with

  • HTML / CSS

About the code

Stripe Border

Diagonal stripe border effects in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Danny Joris

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

CSS Only Border Animation

CSS-only border animation on hover. It needs a solid background in order to work.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Button Border Slide Mixin Button Border Slide Mixin - GIF Demo

Author

  • Thomas Vaeth

Made with

  • HTML / CSS (SCSS)

About the code

Button Border Slide Mixin

A Sass mixin for a link animation where the border slides around the link on hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Draw Borders from Center Draw Borders from Center - GIF Demo

Author

  • Ben Sheppard

Made with

  • HTML / CSS

About the code

Draw Borders from Center

Draw borders from the center of the box using psudo elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border Composition and Animation Border Composition and Animation - GIF Demo

Author

  • paolo cavana

Made with

  • HTML / CSS

About the code

Border Composition and Animation

Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border Animation Border Animation - GIF Demo

Author

  • Inderpreet Singh

Made with

  • HTML / CSS

About the code

Border Animation

Attractive CSS border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border Animation Border Animation - GIF Demo

Author

  • Corey Bullman

Made with

  • HTML / CSS (SCSS)

About the code

Border Animation

SVG ellipse border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Border Hover Transitions CSS Border Hover Transitions - GIF Demo

Author

  • Jamie Calder

Made with

  • HTML / CSS (SCSS)

About the code

CSS Border Hover Transitions

Border hover transitions using CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Border Animated Border - GIF Demo

Author

  • Jameal G

Made with

  • HTML / CSS

About the code

Animated Border

Animated border tracing.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Double Border Animation Double Border Animation - GIF Demo

Author

  • Antare

Made with

  • HTML / CSS

About the code

Double Border Animation

A border animation in SVG using two lines.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border Animation Border Animation - GIF Demo

Author

  • Rplus

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Border Animation

Pure CSS border animation without SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border-Gradient Mixin Border-Gradient Mixin - GIF Demo

Author

  • John Grishin

Made with

  • HTML / CSS (SCSS)

About the code

Border-Gradient Mixin

Implementation of border gradient that can be applied to elements with border-radius.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border Animation Effect Border Animation Effect - GIF Demo

Author

  • Mary Lou

Made with

  • HTML / CSS / JavaScript

About the code

Border Animation Effect

Border animation effect with SVG and CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: SVG Border Animation SVG Border Animation - GIF Demo

Author

  • Zach Saucier

Made with

  • HTML / CSS

About the code

SVG Border Animation

Simple and beautiful SVG border animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Border Gradient Effect Animated Border Gradient Effect - GIF Demo

Author

  • Jonathan Dauz

Made with

  • HTML / CSS (SCSS)

About the code

Animated Border Gradient Effect

I've created an animated gradient border using CSS3 gradients and animations. I make changes to the background-position CSS property during animation to give the effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Border-Radius Animation Border-Radius Animation - GIF Demo

Author

  • yuku

Made with

  • HTML / CSS (SCSS)

About the code

Border-Radius Animation

Experiment with border-radius animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Simon Goellner Simon Goellner - GIF Demo

Author

  • Simon Goellner

Made with

  • HTML / CSS (Less)

About the code

Simon Goellner

Stitching effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top