16 CSS Border Animations

About the code

Border Animation CSS

Pure CSS border animation.

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

Dependencies: bootstrap.css

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: -

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: -

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: -

About the code

Border Animation

Attractive CSS border animation.

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

Dependencies: -

About the code

Border Animation

SVG ellipse border animation.

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

Dependencies: -

About the code

CSS Border Hover Transitions

Border hover transitions using CSS.

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

Dependencies: -

About the code

Animated Border

Animated border tracing.

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

Dependencies: -

About the code

Double Border Animation

A border animation in SVG using two lines.

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

Dependencies: -

About the code

Border Animation

Pure CSS border animation without SVG.

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

Dependencies: -

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: -

About the code

Border Animation Effect

Border animation effect with SVG and CSS

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

Dependencies: -

About the code

SVG Border Animation

Simple and beautiful SVG border animation.

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

Dependencies: -

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: -

About the code

Border-Radius Animation

Experiment with border-radius animation.

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

Dependencies: -

About the code

Simon Goellner

Stitching effect.

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

Dependencies: -