The element needing multiple borders should have its own border and relative positioning.
#borders {
position: relative;
border: 5px solid #f00;
}
The secondary border is added with a pseudo element. It is set with absolute positioning and inset with top/left/bottom/right values. This will also have a border and is kept beneath the content (preserving, for example, selectability of text and clickability of links) by giving it a negative z-index value.
#borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}
You can do a third border by using the :after pseudo class as well. Take special note that Firefox 3 (pre 3.6) screws this up by supporting :after and :before, but not allowing them to be absolutely positioned (so it looks weird).
Ref URL : http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
