HTML5 and CSS3 Advent 2011

Border-width animation fun

Of course you know about the css3 transition property. But did you know it works on borders too? These are some fancy effects you can create by transitioning the borders.

Examples

See more dusty old cars
The border effect in it's simplest form (try hovering it)
Go to our super car selection
Round looks much better, also we leave a 2px border after the transition
Check out this orange monster
It works with dotted borders too
Take a look at this speedy car
We can use the effect to highlight on mouse over
Check out this orange sports car!
Let's spice it up with another color and a dotted border!

How does it work?

The clue is to cover the element by adding a border with half the width of the element, add box-sizing: border-box so the border actually covers the element and transition the border on :hover to a much smaller width. For extra effect you can use RGBA colors with different transparency settings.

Play around

We've prepared a jsFiddle with all the example code above so you can go ahead and play around with it: http://jsfiddle.net/WaGbr/.

A word on compatibility

We've tested these on Safari 5.1, Chrome and Firefox 8.0.

These effects will only work on browsers that support border-box. The transitions won't work if they aren't supported but will degrade gracefully. There are some browser inconsitencies between the browsers that do support these features: Firefox for instance won't transition a dotted border but replaces it with a solid one.

Show us the source!

Feel free to look around the different source files we used for this example.

Check out our all new HTML & CSS Advent 2012