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:
- inset: (optional) if defined, the shadow will appear inside the element.
- horizontal: the x distance from the element
- vertical: the y distance from the element
- blur: (optional) the blur radius, i.e. 0 for no blur
- 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
- 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.