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.
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-radiusbut remember that the radius is applied to the inner element so the outer shadows extrude accordingly. - Unlike a real border,
box-shadowdoes 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.
