Skip to content
Animated borders for any block level element.
JavaScript HTML CSS
Branch: master
Clone or download

Animated Border Build Status

Animated borders for any block level element.

Getting Started

Download the production version or the development version.

And then include the css into your site styles and make the image available.

In your web page:

<script src="jquery.js"></script>
<script src="dist/jquery.animatedborder.min.js"></script>
jQuery(function($) {
  $('div.bordered').animatedBorder({size : 1, color : 'red'});


The animated borders have two settings that are set at initialization.

{'size':size, 'color' : color}

  • size is an integer in pixels
  • color is a string, accepting any valid css color. This can be a name or a hex code with a leading hash sign.


There are examples available at


In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.

Also, please don't edit files in the dist subdirectory as they are generated via grunt. You'll find source code in the src subdirectory!

Release History

  • 1.0.0 - Modernized testing framework and upgraded grunt.
  • 0.6.0 - Update with a new build system to run automated tests
  • 0.5.0 - Sep 10, 2011 - Initial release on github, relocated from jQuery plugins.


Copyright (c) 2012 Craig Davis Licensed under the MIT license.

You can’t perform that action at this time.