40+ CSS Border Animations (Free)

Check out these 100% Free HTML and CSS border animation examples. These are the best CSS3 border animations I could find.

1. Animated CSS Border-Radius

CSS Border Animations - Animated CSS Border-Radius
Resize the container to see how the color of the shapes and text in the block changes.
Author: Andrej Sharapov (andrejsharapov)
Created on: January 28, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: mix-blend-mode, luminosity, animating, border-radius, css

2. Animated SVG CSS Border

This is a cool idea - A CSS Border using an animated SVG. Very creative solution.

CSS Border Animations - Animated SVG CSS Border
Author: Louis Hoebregts (Mamboleoo)
Created on: September 16, 2019
Made with: HTML, SCSS

3. Animated CSS Border (Blue)

This is styled in a dark blue color scheme. Perfect for a video game or animated book / article website.

CSS Border Animations - Animated CSS Border (Blue)
border-animation-css is create only in use of css.
Author: Swarup Kumar Kuila (uiswarup)
Created on: August 6, 2018
Made with: HTML, CSS

4. Animated Gradient Border-Radius

It is a sort of egg-shaped gradient element that looks very unique. The author, Nick Lewis used Stylus to create it, but you can always compile it down to pure CSS3 within the Codepen.

CSS Border Animations - Animated Gradient Border-Radius
Author: Nick lewis (nickylew)
Created on: October 13, 2018
Made with: HTML, Stylus

5. Dashed Border Icon Animations

CSS Border Animations - Dashed Border Icon Animations
icon animations success, warning and danger. Simple and clean icon animations
Author: FlorinCornea (FlorinCornea)
Created on: March 3, 2020
Made with: HTML, CSS
Tags: icon, animations, success, danger, warning

6. Gradient CSS Border (Without Pseudo Elements)

CSS Border Animations - Gradient CSS Border (Without Pseudo Elements)
Author: Stefan Judis (stefanjudis)
Created on: January 18, 2019
Made with: HTML, SCSS

7. Blob-shaped Border Radius

CSS Border Animations - Blob-shaped border radius
Author: Jessica Aiskel (Ninaiskel)
Created on: October 4, 2019
Made with: HTML, SCSS
Tags: css, border-radius

8. Rotating Border

CSS Border Animations - Rotating border
Author: Jesse B (Chester)
Created on: April 27, 2019
Made with: HTML, SCSS

9. Gold Border Shimmer

CSS Border Animations - Gold Border Shimmer
Author: Kevin Cullen (kevinmcullen)
Created on: February 1, 2019
Made with: HTML, CSS

10. SVG Ellipse Border Animation

CSS Border Animations - SVG Ellipse Border Animation
Author: Corey Bullman (coreybullman)
Created on: July 6, 2016
Made with: HTML, SCSS

11. SVG Border Animation 1

CSS Border Animations - SVG Border Animation 1
Author: Zach Saucier (Zeaklous)
Created on: January 13, 2014
Made with: HTML, CSS, JS
Tags: svg-animation, svg, animation, css-transition

12. [PURE CSS] Border Animation Without Svg

CSS Border Animations - [PURE CSS] border animation without svg
single element animation icon~ inspired by: http://tympanus.net/Tutorials/BorderAnimationSVG/ & http://mopcon.org/2014/news.php brower support: animation: IE10+ clip: all browser
Author: Rplus (Rplus)
Created on: September 26, 2014
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, border, animation, clip

13. CSS-only Border Animation

CSS Border Animations - CSS-only border animation
CSS-only border animation on hover. It needs a solid background in order to work.
Author: Danny Joris (DannyJoris)
Created on: April 10, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css-only, border, animation, hover

14. Border-gradient Mixin

CSS Border Animations - Border-gradient mixin
Implementation of border gradient that can be applied to elements with border-radius.
Author: John Grishin (exah)
Created on: April 24, 2014
Made with: HTML, SCSS
Tags: border-radius, gradient, circle, box-shadow, css

15. Button Border Slide Mixin

CSS Border Animations - Button Border Slide Mixin
A Sass mixin for a link animation where the "border" slides around the link on hover.
Author: Thomas Vaeth (thomasvaeth)
Created on: July 5, 2017
Made with: HTML, SCSS
Tags: button, sass-mixin, animation, transition, link

16. Draw Borders From Center!

CSS Border Animations - Draw borders from center!
Draw borders from the center of the box using psudo elements
Author: Ben Sheppard (flatking)
Created on: January 12, 2017
Made with: HTML, CSS
Tags: css, html, pseudo, animation, css-animation

17. Border Composition And Animation

CSS Border Animations - Border composition and animation
Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.
Author: paolo cavanna (paolocavanna)
Created on: July 27, 2016
Made with: HTML, CSS
Tags: css, border, animation

18. CSS-only Border Animation

CSS Border Animations - CSS-only border animation
CSS-only border animation on hover. It needs a solid background in order to work.
Author: Danny Joris (DannyJoris)
Created on: April 10, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css, css-only, border, animation, hover

19. CSS Border Hover Transitions

CSS Border Animations - CSS border hover transitions
Border transitions using CSS
Author: Jamie Calder (jamiecalder)
Created on: October 24, 2015
Made with: HTML, SCSS
Tags: css, border, transitions, scss

20. Animated Border Tracing

CSS Border Animations - Animated border tracing
Author: Jameal G (realjameal)
Created on: July 11, 2015
Made with: HTML, CSS
Tags: border-animation, border tracing, animated border

21. Double Border Animation

CSS Border Animations - Double border animation
A border animation in SVG using two lines. Based on Zach Saucier's animation.
Author: Antares (antares)
Created on: December 11, 2014
Made with: HTML, CSS, JS
Tags: svg, svg-animation, css-animation, border

22. Border Animation Effect With SVG And CSS

CSS Border Animations - Border Animation Effect with SVG and CSS
The website of Carl Philipe Brenner has some very creative and subtle animations and today we want to explore how to recreate a border animation effect using CSS transitions on SVG lines.

23. SVG Border Animation

CSS Border Animations - SVG Border Animation
Author: Zach Saucier (Zeaklous)
Created on: January 13, 2014
Made with: HTML, CSS, JS
Tags: svg-animation, svg, animation, css-transition

24. Animated Border Gradient Effect

CSS Border Animations - 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.
Author: Jonathan Dauz (jondauz)
Created on: September 1, 2013
Made with: HTML, SCSS
Tags: css3, gradients, animations

25. Framed

CSS Border Animations - Framed
Author: Chance Squires (chancesq)
Created on: May 13, 2020
Made with: HTML, CSS

26. Border-radius Animation

CSS Border Animations - Border-radius animation
Author: yuku (yukulele)
Created on: June 25, 2013
Made with: HTML, SCSS
Tags: pure-css

27. Loading Animation

CSS Border Animations - Loading Animation
Stitching effect. Using clip: rect(); with animations to create a (unique?) border animation. I've not seen this anywhere else on the web (I'm sure it probably maybe possibly exists?) I'm no good with math, so the animation sequencing is a little asymmetric. Would love to ...
Read More
Author: Simon Goellner (simeydotme)
Created on: February 6, 2013
Made with: HTML, Less, JS
Tags: rodeo-002, animation, loading, clip

28. Animating Border

CSS Border Animations - Animating Border
Author: Shaw (shshaw)
Made with: HTML, Less

29. Button Border Animation

CSS Border Animations - Button Border Animation
Border animation using pseudo elements in css. Created with only one html element in pure css.
Author: thelaazyguy (thelaazyguy)
Created on: August 1, 2017
Made with: HTML, CSS
Tags: border-animation, button-animation, animation, custom link, link-animation

30. Border-animation-css

CSS Border Animations - border-animation-css
border-animation-css is create only in use of css.
Author: Swarup Kumar Kuila (uiswarup)
Created on: August 6, 2018
Made with: HTML, CSS

31. CSS Border Transitions

CSS Border Animations - CSS Border transitions
UPDATE: Here are some useful mixins to help you create & customize your own buttons: Draw Draw meet Check out my button collection for more.
Author: Giana (giana)
Created on: August 27, 2015
Made with: HTML, SCSS
Tags: css, sass, buttons, transition

32. Border Animation Effect

CSS Border Animations - Border Animation Effect
Author: vavik (vavik96)
Created on: March 14, 2015
Made with: HTML, CSS

33. Fancy Animated Rainbow Border XD

CSS Border Animations - Fancy animated rainbow border xD
Author: Ahmed Nasr (ahmedhosna95)
Created on: February 22, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: subscribe-box, newsletter box, css-animation, border-animation, border rainbow animation

34. Border Hover Effects

CSS Border Animations - Border hover effects
border animation on hover
Author: co0kie (co0kie)
Created on: October 3, 2019
Made with: HTML, SCSS, JS
Tags: border gradient, border-animation, background, multi-background

35. Border Drawing Hover Effect

CSS Border Animations - Border Drawing Hover Effect
Author: Christopher Ware (christopherware)
Created on: January 30, 2019
Made with: HTML, CSS
Tags: image-hover-effect, border hover, border-animation, border drawing animation, image-border

36. Button Border Animation - CSS Only

CSS Border Animations - Button Border Animation - CSS Only
A CSS only border animation on hover
Author: Soumyajit Pathak (drenther)
Created on: October 9, 2016
Made with: Pug, Sass, JS
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-only, border-animation, button, transition, hover

37. Button Hover Border Animation

CSS Border Animations - Button  Hover Border Animation
Author: Jedi (jessedilen)
Created on: June 9, 2016
Made with: HTML, SCSS