45 CSS Border Animations

About a code

Animated Border Gradient

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Rotating Border Animation

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

Responsive: yes

Dependencies: -

About a code

Transparent Inner Border with Hover Effect

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

Responsive: no

Dependencies: -

About a code

Zig-Zag Border & Cool Hover Effect

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

Responsive: no

Dependencies: -

About a code

CSS Only Cool Hover Effect

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

Responsive: no

Dependencies: -

About a code

Border Gradient Hover Effect

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

Responsive: yes

Dependencies: -

About a code

Fancy Border on Hover

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

Responsive: no

Dependencies: -

About a code

Fancy Border on Hover

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

Responsive: no

Dependencies: -

About a code

CSS Only Border Hover Effect

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

Responsive: no

Dependencies: -

About a code

Framed <div> on Hover

CSS only framed div on hover.

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

Responsive: no

Dependencies: -

About a code

Fancy Border Radius CSS

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

Responsive: yes

Dependencies: -

About a code

Houdini Gradient Border Animation

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Framed

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

Responsive: no

Dependencies: -

About a code

Input with Gradient-Border - Dark

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

Responsive: yes

Dependencies: -

About a code

Dashed Border Icon Animations

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

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

Responsive: no

Dependencies: font-awesome.css

About a code

Fancy Animated Rainbow Border

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

Responsive: no

Dependencies: -

About a code

Magic Border Mixin

Magic border on hover, two styles: standard border and mask border (allows gradients etc).

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

Responsive: yes

Dependencies: -

About a code

Gradient Border

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

Responsive: yes

Dependencies: -

About a code

Fancy Border Radius

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

Responsive: yes

Dependencies: -

About a code

CSS Border

Animated CSS border (using an SVG).

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

Responsive: yes

Dependencies: -

About the code

Rotating Border

Rainbow rotating border in HTML and CSS.

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

Responsive: yes

Dependencies: -

About a code

Gold Border Shimmer

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

Responsive: no

Dependencies: -

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Border Animation

Border animation using clip-path.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Border Animation

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

Responsive: no

Dependencies: -

About the code

Animating border-radius

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

Responsive: yes

Dependencies: -

About the code

Border Animation CSS

Pure CSS border animation.

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

Dependencies: bootstrap.css

About the code

Stripe Border

Diagonal stripe border effects in pure CSS.

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

Responsive: no

Dependencies: -

About the code

CSS Only Border Animation

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

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

Responsive: yes

Dependencies: -

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 a code

CSS Border Transitions

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

Responsive: yes

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