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 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
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;
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;
- 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.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.