Emulating Differently Colored Double Borders With CSS3

CSS Level 3 provides a number of new approaches for border styling such as border-image and border-radius. There is also an addition to the classic border property, that allows the setting of as many borders to each side of the element as you need, and each one with a different color. Unfortunately, as of December 2010 only Mozilla FireFox supports this via proprietary implementation: -moz-border-top-colors, -moz-border-right-colors, -moz-border-bottom-colors and -moz-border-left-colors.

The solution demonstrated on this page utilizes border and box-shadow with shadow blur turned off in order to create a double border with two different colors and can save us from adding an extra element in order to fulfill some design. It works with Mozilla FireFox, Google Chrome, Opera and Internet Explorer 9. Older versions of Internet Explorer will display just the normal border:

The HTML:

[html]
<div class="double-border">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.</div>
[/html]

… And the CSS:

[css].double-border
{
 padding: 8px;
 <span style="color: #ff0000;">border: solid 6px #ff8000;</span>
<span style="color: #ff0000;"> -moz-box-shadow: 0 0 0 6px #0f0;</span>
<span style="color: #ff0000;"> -webkit-box-shadow: 0 0 0 6px #0f0;</span>
<span style="color: #ff0000;"> box-shadow: 0 0 0 6px #0f0;</span>
 width: 200px;
 float: left;
 margin: 8px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}[/css]

What we actually do is to set shadow’s x-offset, y-offset and the shadow blur to zero and set color for the shadow and in this manner to emulate a solid color border to the element:

[css]
-moz-box-shadow: 0 0 0 6px #0f0;
[/css]

This will render a solid color 6-pixel wide shadow that can be used as an outer border of the element. The inner border is set via the classic:

[css]
border: solid 6px #ff8000;
[/css]

What is important in this solution is that we also need to set margin to the element that is equal or bigger than the shadow spread, otherwise the adjacent elements will be overlapped by the border we have emulated from a box-shadow.

If you like the example you can download it too. Find more experiments here.