Update : Multiple box-shadows now work in Chrome 5 as well as in Firefox 3.5+, although in the examples with border radius, each successive shadow becomes more and more squared off; see Chrome screenshots 1 & 2 below.
To make multiple borders appear around an element, the traditional approach has been to nest multiple elements and apply a different border to each. For example, to put a rainbow border on an element:
This approach uses seven
div elements. However, there is an
alternative that avoids the need for so many superfluous elements: the
property. A key feature of this property is that it allows for multiple shadows to be supplied at once:
box-shadow: none | <shadow> [ , <shadow> ]*
When multiple shadows are supplied, they can be positioned on top of each
other to create a multiple-border effect. Using the
property in this way requires support for the "spread radius" value, and this
is not currently supported by WebKit (includes Safari and Chrome). However,
Firefox 3.5 (now available
as a preview release) does support
box-shadow spread radius, and if
using that browser, the following example should look identical to the example
box-shadow for multiple borders not only eliminates the need for extra markup,
it also allows the multiple borders to be easily rounded on corners simply by adding the
property (see screenshot from Firefox 3.5,
and another from Chrome 5):
To accomplish the same above with multiple nested elements, you would have to
tediously increase the
border-radius for each wrapped
element in order to get the corner arcs to fit together properly.
I suppose using
box-shadow to implement borders is a kind of hack
(the technique requires setting margins because the shadows don't effect page flow),
but we're celebrating the compeltion of Firefox 3.5 by
showcasing hacks like these!
It would be great if multiple borders could simply be specified on a
border property just as is possible with
Each subsequent border defined could wrap around the previously defined borders.
The property could be defined:
border: none | <border> [ , <border> ]*
In any case, the
box-shadow property still has a benefit of
allowing the borders to blend together by specifying the
blur radius (see screenshot from Firefox 3.5 and
another from Chrome 5):
It's exciting to see how Mozilla is implementing bleeding-edge CSS features in Firefox as we have become accustomed to from the WebKit team. Great work everyone!