The element needing multiple borders should have its own border and relative positioning.
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.
content: " ";
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/