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:


<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>

… And the CSS:

 padding: 8px;
 border: solid 6px #ff8000;
 -moz-box-shadow: 0 0 0 6px #0f0;
 -webkit-box-shadow: 0 0 0 6px #0f0;
 box-shadow: 0 0 0 6px #0f0;
 width: 200px;
 float: left;
 margin: 8px;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;

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:

-moz-box-shadow: 0 0 0 6px #0f0;

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:

border: solid 6px #ff8000;

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.



  1. Pingback: World Spinner

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s