How to Create Multiple Borders in CSS3

The CSS2.1 border property has served us well but it’s a little basic. What if you require two or more borders in different colors? The CSS3 border-image property is an option but it still requires Photoshopping shenanigans and the syntax is quite complex. However, if you simply need a series of solid-color borders, there is an easier alternative: the box-shadow property.

View the multiple border demonstration page…

box-shadow has six arguments:

1. inset: (optional) if defined, the shadow will appear inside the element.
2. horizontal: the x distance from the element
3. vertical: the y distance from the element
4. blur: (optional) the blur radius, i.e. 0 for no blur
5. spread: (optional) the distance the shadow spreads, i.e. 1px extends the shadow 1 pixel in all directions so it’s 2px wider and taller than the parent element
6. color: the shadow color

The little-used spread argument can be used to create a border. For example, a 1 pixel solid black border can be created using no blur and a 1px spread:

box-shadow: 0 0 0 1px #000;

Unlike the border property, box-shadow permits multiple shadows separated with a comma. The last shadow defined sits at the bottom of the stack so, to create the box shown above, we use this code:

box-shadow: 
	0 0 0 2px #000,
	0 0 0 3px #999,
	0 0 0 9px #fa0,
	0 0 0 10px #666,
	0 0 0 16px #fd0,
	0 0 0 18px #000;

Note:

• The effect works in all the latest browsers including IE9.
• It can be combined with border-radius but remember that the radius is applied to the inner element so the outer shadows extrude accordingly.
• Unlike a real border, box-shadow does not require space so the effect will flow under other elements.

Some will consider it a hack, but it’s an quick solution for multiple borders which doesn’t require images.