How to create two borders - Pure CSS - css

Question

I am simply trying to achieve the same effect as in the image below*. I want the Header to have two borders, one is lighter than the other to give it an embossed feel.
Before I asked this question on here, I have already done some research and tried ideas inspired from websites like: CSS-Tricks, Daverupert ect... But they are adding Outlines - and after trying that it didn't really work on modern browsers so how about the old ones!
*Since I am now allowed to post an image at this time, please refer to this link for an image: http://postimg.org/image/4b6ne0qod/
Please take a look at my website here: leo.meeped.co.uk Look at the header - you will also notice that it has a shadow after the think border that makes it look like it's edge has been folded.
Update: I very like this folding effect, however it makes the header fade out a bit / not stand-out when you scroll down to a white or gray page - as it seem like the shadow blend with the page since they are a very relative colours. So the idea was to add anther border just under the current border to make to emphasise it's edge.
Hope my question is clear, I am looking for your opinions and help.
In case you want the HTML and CSS of my site then here it is:
<!--Header--><header>
<div id="headerWrapper">
<div id="headerContent">
<div id="headerLogo">
<img alt="loai design studio logo" src="assets/elements/logo.png"/>
</div>
<nav><ul id="mainMenu" class="snapjs-expand-left">
<li>Home</li>
<li>Portfolio
<li>About Me</li>
<li><a class="active" href="contact.html">Contact Me</a></li>
<li>Blog</li>
</ul></nav>
</div>
</div>
</header>
/*HEADER////////////////////////////////////////////*/
/*Header Wrapper*/#headerWrapper {
background-color: #FFFFFF;
border-bottom: 5px solid #E8E8E8;
width: 100%;
position: fixed;
top: 0; left: 0;
z-index: 1000;
-webkit-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.20);
}
/*Header Content Container*/#headerContent {
padding: 0 20px;
}
/*Header Logo*/
#headerLogo {
width: 130px;
margin: 19px 0;
float: left;
}
/*Main Menu*/
#mainMenu {
float: right;
margin: 17px 0;
}
#mainMenu li {
float: left;
}
#mainMenu a {
padding: 10px 15px;
margin-left: 3px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
#mainMenu a:hover {
color: #FFFFFF;
background-color: #4E6C98;
}
#mainMenu a.active {
color: #4E6C98;
cursor: default;
}
#mainMenu a.active:hover {
background-color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
background: transparent;
}

Answer 1

If you simply want two borders without using CSS's outline property, why don't you simply create a border bottom for div#headerWrapper and one for div#headerContent making that of headerWrapper darker:
div#headerWrapper
{
border-bottom: solid 1px #3D9ED5;
}
div#headerContent
{
border-bottom: solid 1px #81CEFA;
background-color: #54BEFB;
}
If you want the exact appearance of your picture, you can do so by adding the following code (assuming that the part below the border should be empty):
header
{
height: 50px;
background-color: #FBFBFB;
}
If text should be inserted into the lower half of the picture, add it after the outer div (in header) and remove the height from the CSS.

Answer 2

Try using CSS box shadows to create "shadows". For example:
#headerWrapper {
box-shadow: 0 1px 0 rgba(255,0,0,0.8), 0 2px 0 rgba(0,255,0,0.8);
}
Each new shadow should be separated by a comma.
Does this do what you were wanting?
The browser support is pretty good for box shadows now but you might want to keep it in mind. Pretty much everything except IE8 supports it if you use all the vendor prefixes, for more info see: http://caniuse.com/css-boxshadow