top of page arrow
CSS Animated Gradient Border

One method of providing the illusion of an animated gradient border is to place an opaque background over an animated gradient background, leaving only the border area uncovered.

The advantage of this method is that it supports the use of border-radius instead of leaving sharp, square corners, which is what happens when using a gradient border-image instead.

Here we have created one container with the "animated border" and another identical container with a nearly transparent background to help illustrate the method.


Animated Border
Animated Background