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
Resize the container to see how the color of the shapes and text in the block changes.
Author: Andrej Sharapov (andrejsharapov)
Links: Source Code / Demo
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.
Author: Louis Hoebregts (Mamboleoo)
Links: Source Code / Demo
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.
border-animation-css is create only in use of css.
Author: Swarup Kumar Kuila (uiswarup)
Links: Source Code / Demo
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.
Author: Nick lewis (nickylew)
Links: Source Code / Demo
Created on: October 13, 2018
Made with: HTML, Stylus
5. Dashed Border Icon Animations
icon animations success, warning and danger. Simple and clean icon animations
Author: FlorinCornea (FlorinCornea)
Links: Source Code / Demo
Created on: March 3, 2020
Made with: HTML, CSS
Tags: icon, animations, success, danger, warning
6. Gradient CSS Border (Without Pseudo Elements)
Author: Stefan Judis (stefanjudis)
Links: Source Code / Demo
Created on: January 18, 2019
Made with: HTML, SCSS
7. Blob-shaped Border Radius
Author: Jessica Aiskel (Ninaiskel)
Links: Source Code / Demo
Created on: October 4, 2019
Made with: HTML, SCSS
Tags: css, border-radius
8. Rotating Border
Author: Jesse B (Chester)
Links: Source Code / Demo
Created on: April 27, 2019
Made with: HTML, SCSS
9. Gold Border Shimmer
Author: Kevin Cullen (kevinmcullen)
Links: Source Code / Demo
Created on: February 1, 2019
Made with: HTML, CSS
10. SVG Ellipse Border Animation
Author: Corey Bullman (coreybullman)
Links: Source Code / Demo
Created on: July 6, 2016
Made with: HTML, SCSS
11. SVG Border Animation 1
Author: Zach Saucier (Zeaklous)
Links: Source Code / Demo
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](https://cdn.cactal.app/website-assets/h_Lq1CyyNk22llOEj6FYB.png)
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-only border animation on hover. It needs a solid background in order to work.
Author: Danny Joris (DannyJoris)
Links: Source Code / Demo
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
Implementation of border gradient that can be applied to elements with border-radius.
Author: John Grishin (exah)
Links: Source Code / Demo
Created on: April 24, 2014
Made with: HTML, SCSS
Tags: border-radius, gradient, circle, box-shadow, css
15. Button Border Slide Mixin
A Sass mixin for a link animation where the "border" slides around the link on hover.
Author: Thomas Vaeth (thomasvaeth)
Links: Source Code / Demo
Created on: July 5, 2017
Made with: HTML, SCSS
Tags: button, sass-mixin, animation, transition, link
16. Draw Borders From Center!
Draw borders from the center of the box using psudo elements
Author: Ben Sheppard (flatking)
Links: Source Code / Demo
Created on: January 12, 2017
Made with: HTML, CSS
Tags: css, html, pseudo, animation, css-animation
17. Border Composition And Animation
Show staggered border composition without resorting to empty elements and using multiple backgrounds instead.
Author: paolo cavanna (paolocavanna)
Links: Source Code / Demo
Created on: July 27, 2016
Made with: HTML, CSS
Tags: css, border, animation
18. CSS-only Border Animation
CSS-only border animation on hover. It needs a solid background in order to work.
Author: Danny Joris (DannyJoris)
Links: Source Code / Demo
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
Border transitions using CSS
Author: Jamie Calder (jamiecalder)
Links: Source Code / Demo
Created on: October 24, 2015
Made with: HTML, SCSS
Tags: css, border, transitions, scss
20. Animated Border Tracing
Author: Jameal G (realjameal)
Links: Source Code / Demo
Created on: July 11, 2015
Made with: HTML, CSS
Tags: border-animation, border tracing, animated border
21. Double Border Animation
A border animation in SVG using two lines. Based on Zach Saucier's animation.
Author: Antares (antares)
Links: Source Code / Demo
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
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.
Links: Source Code / Demo
23. SVG Border Animation
Author: Zach Saucier (Zeaklous)
Links: Source Code / Demo, Codepen.io
Created on: January 13, 2014
Made with: HTML, CSS, JS
Tags: svg-animation, svg, animation, css-transition
24. 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)
Links: Source Code / Demo
Created on: September 1, 2013
Made with: HTML, SCSS
Tags: css3, gradients, animations
25. Framed
Author: Chance Squires (chancesq)
Links: Source Code / Demo
Created on: May 13, 2020
Made with: HTML, CSS
26. Border-radius Animation
Author: yuku (yukulele)
Links: Source Code / Demo
Created on: June 25, 2013
Made with: HTML, SCSS
Tags: pure-css
27. 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)
Links: Source Code / Demo
Created on: February 6, 2013
Made with: HTML, Less, JS
Tags: rodeo-002, animation, loading, clip
28. Animating Border
Author: Shaw (shshaw)
Links: Source Code / Demo
Made with: HTML, Less
29. Button Border Animation
Border animation using pseudo elements in css. Created with only one html element in pure css.
Author: thelaazyguy (thelaazyguy)
Links: Source Code / Demo
Created on: August 1, 2017
Made with: HTML, CSS
Tags: border-animation, button-animation, animation, custom link, link-animation
30. Border-animation-css
border-animation-css is create only in use of css.
Author: Swarup Kumar Kuila (uiswarup)
Links: Source Code / Demo
Created on: August 6, 2018
Made with: HTML, CSS
31. 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)
Links: Source Code / Demo
Created on: August 27, 2015
Made with: HTML, SCSS
Tags: css, sass, buttons, transition
32. Border Animation Effect
Author: vavik (vavik96)
Links: Source Code / Demo
Created on: March 14, 2015
Made with: HTML, CSS
33. Fancy Animated Rainbow Border XD
Author: Ahmed Nasr (ahmedhosna95)
Links: Source Code / Demo
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
border animation on hover
Author: co0kie (co0kie)
Links: Source Code / Demo
Created on: October 3, 2019
Made with: HTML, SCSS, JS
Tags: border gradient, border-animation, background, multi-background
35. Border Drawing Hover Effect
Author: Christopher Ware (christopherware)
Links: Source Code / Demo
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
A CSS only border animation on hover
Author: Soumyajit Pathak (drenther)
Links: Source Code / Demo
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
Author: Jedi (jessedilen)
Links: Source Code / Demo
Created on: June 9, 2016
Made with: HTML, SCSS
NEW 🔥 Idea to UI/UX Design In Seconds With AI 🔥
👉 Click to try it for free: UXCanvas.ai
More Awesome Lists:
Share: