In a world where loading time is important and we try to reduce the image usage as much as possible, there are some cases when we need to have a double border or even triple border of different colors each, like the one below:

As you can observe it, there is a darker line and a white line below the title. If the border-colors would be a crossbrowser solution then it would be easy to set as many colors as we would like on border (at least 1px wide each color). For now only Gecko-based browser support this: -moz-border-top-colors:black white

Do not despair, the battle is not lost, we have many other alternatives. Let’s examine those alternative solutions:

1 using box-shadow

The css3 property box-shadow without the blurring is the exact clone of an object. Of course we are talking about rectangular objects here, because the web is a rectangular space, for shaped objects we use more advanced stuff like filters. So to have a black and red border-bottom we just move vertically 1px down the shadow and make it’s blur 0 (the 3rd parameter in the box-shadow property).

The code for this is:

h1 {
   border-bottom:1px solid #000;
   box-shadow:0 1px 0 red
}

If you have a double border on left or right instead of top or bottom you just change the first value(horizontal shadow) with negative value for left shadow and positive value for right shadow(right border).

Note: the only disadvantage of this would be that it is not supported in IE7-IE8.

2 :after

Using the :after or :before pseudo element seems like a great solution for succeeding with double or triple border.

h1 {
   border-bottom:1px solid #000;
   position:relative
}
h1:after {
   content:'';
   background:#fff;
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:1px;
}

In case you want a tripple border you involve also the :before pseudo element with just moving it 1 pixel up (bottom:1px).
Note: This is supported even in IE8, though IE7 is still doesn’t support it, let’s hope you don’t need that.

3 outline

When you need each 4 border to be double, you could use border in combination with outline property. Since the :after and :before elements can not have descendents like :after:after or :before:before, we can use them only for one side of the object, or in one side the :after and in the other the :before pseudo element.
The outline property is the outer border of an element, the border property is the inner. What is great about these 2 properties is that we can have them as wide as we wish.

That’s about it. I wanted only to discuss about css solutions not html solutions, like adding a span inside the h1 and adding border on it. That is already obtrusive and we don’t want that.

Conclusion:

If you don’t care about older Internet Explorer versions, only IE9+ you could combine all these solutions very nicely.
We could even have a nice rainbow border on the bottom of the element.

div {
   border-bottom:2px solid #000;
   box-shadow:0 1px 0 red, 0 2px 0 red;
   position:relative;
   padding-bottom:5px
}
div:before,div:after { 
   background:yellow;
   content:'';
   position:absolute;
   bottom:0;
   left:0;
   width:100%;
   height:2px
}
div:after {
   background:green;
   bottom:2px
}

What I did in the above example was to combine the :after, :before elements with multiple box-shadow and border properties. I made the main element relative in it’s position and the :after and :before element absolute and positioned in the bottom, one above the other with 2px distance. After that I’ve added also 2 box-shadow lines without a blur effect and of course the standard bottom border. So the order is like this, from the inside to the outside: :after, :before, border, box-shadow. Since outline can not be applied only in 1 side(it applies always on 4 sides of an element), we could not use it here. By the way, we didn’t use border-image property because that is using a raster image instead of using css generated style.

That’s it about borders for people who want to save a little bit of bandwidth, take out 1 http request, save the day and make the web a faster place.