#header {
background-color: #ddd;
height: 125px;
left: 50%;
margin-left: -480px;
position: fixed;
width: 960px;
}
#header-top {
background-color: #fff;
border-left: 1px solid #aaa;
border-radius: 25px 25px 0 0;
border-right: 1px solid #aaa;
border-top: 1px solid #aaa;
height: 85px;
width: 958px;
}
#nav-wrapper {
background-color: #fff;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
width: 958px;
}
#nav {
background-color: Orange;
border-radius: 15px 15px 0 0;
height: 40px;
margin: 0 1px;
width: 956px;
}
#topleftcorner,#toprightcorner,#nav-corner-left,#nav-corner-right{display:none;}
The basic idea is that I put a #ddd color on #header (the page background color). I then use border-radius on #header-top to round the corners. I also apply a white background to #nav-wrapper. Then I just fix up the borders, and remove the unnecessary images.
As for your 1px off problem, it's a rounding error. I removed left:0;right:0 from #header and replaced it with left:50%;margin-left: -480px so that it doesn't happen.