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

  1. CSS Border Examples

Creator

  • Chance Squires

Programming language

  • HTML / CSS

Information a code

Framed

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • FlorinCornea

Programming language

  • HTML / CSS

Information a code

Dashed Border Icon Animations

CSS icon animations success, warning and danger. Simple and clean icon animations.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Creator

  • alphardex

Programming language

  • HTML / CSS (SCSS)

Information a code

Gradient Border

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jessica Aiskel

Programming language

  • HTML / CSS (SCSS)

Information a code

Fancy Border Radius

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Louis Hoebregts

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS Border

Animated CSS border (using an SVG).

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Jesse Breneman

Programming language

  • HTML / CSS (SCSS)

Information the code

Rotating Border

Rainbow rotating border in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Kevin Cullen

Programming language

  • HTML / CSS

Information a code

Gold Border Shimmer

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Andrej Sharapov

Programming language

  • HTML (Pug) / CSS (SCSS)

Information 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.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • kang

Programming language

  • HTML / CSS

Information the code

Border Animation

Border animation using clip-path.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Nick lewis

Programming language

  • HTML / CSS (Stylus)

Information the code

Animating border-radius

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Border Animation CSS

Creator

  • uiswarup

Programming language

  • HTML / CSS

Information the code

Border Animation CSS

Pure CSS border animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: bootstrap.css

Creator

  • Comehope

Programming language

  • HTML / CSS

Information the code

Stripe Border

Diagonal stripe border effects in pure CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Danny Joris

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

CSS Only Border Animation

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

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

Creator

  • Thomas Vaeth

Programming language

  • HTML / CSS (SCSS)

Information the code

Button Border Slide Mixin

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Ben Sheppard

Programming language

  • HTML / CSS

Information the code

Draw Borders from Center

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • paolo cavana

Programming language

  • HTML / CSS

Information the code

Border Composition and Animation

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Border Animation Border Animation - GIF Demo

Creator

  • Inderpreet Singh

Programming language

  • HTML / CSS

Information the code

Border Animation

Attractive CSS border animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Border Animation Border Animation - GIF Demo

Creator

  • Corey Bullman

Programming language

  • HTML / CSS (SCSS)

Information the code

Border Animation

SVG ellipse border animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Jamie Calder

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS Border Hover Transitions

Border hover transitions using CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated Border Animated Border - GIF Demo

Creator

  • Jameal G

Programming language

  • HTML / CSS

Information the code

Animated Border

Animated border tracing.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Antare

Programming language

  • HTML / CSS

Information the code

Double Border Animation

A border animation in SVG using two lines.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Border Animation Border Animation - GIF Demo

Creator

  • Rplus

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Border Animation

Pure CSS border animation without SVG.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • John Grishin

Programming language

  • HTML / CSS (SCSS)

Information the code

Border-Gradient Mixin

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Mary Lou

Programming language

  • HTML / CSS / JavaScript

Information the code

Border Animation Effect

Border animation effect with SVG and CSS

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Zach Saucier

Programming language

  • HTML / CSS

Information the code

SVG Border Animation

Simple and beautiful SVG border animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • Jonathan Dauz

Programming language

  • HTML / CSS (SCSS)

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

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

Creator

  • yuku

Programming language

  • HTML / CSS (SCSS)

Information the code

Border-Radius Animation

Experiment with border-radius animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Simon Goellner Simon Goellner - GIF Demo

Creator

  • Simon Goellner

Programming language

  • HTML / CSS (Less)

Information the code

Simon Goellner

Stitching effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: