Post thumbnail: 16 CSS Border Animations

16 CSS Border Animations

Collection of hand-picked free HTML and CSS border animation code examples.

Related Articles

  1. CSS Animation Examples
  2. CSS Animation Libraries

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

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