CSS Borders workaround - html

Question

On a site I'm building I want to have a 3 coloured border example here for the body.
What is the easiest way to create this?
I tried the following but it didn't work out how I expected it to:
<div id="red">
<div id="white">
<div id="blue">
<!--SITE GOES HERE-->
</div>
</div>
</div>
#red {
width: 100%;
height: 100%;
padding: 16px;
background: #CC092F;
}
#white {
width: 100%;
height: 100%;
padding: 16px;
background: white;
position: absolute;
z-index: 2;
}
#blue{
width: 100%;
height: 100%;
padding: 16px;
background: #0C144E;
position: absolute;
z-index: 3;
}
The problem with that is the padding pushes the divs offscreen, I realise I'm going about it the wrong way… (If i use percentages i.e. 98% it obviously scales, which I do not want) but I can't think of an alternative. Thanks in advance.

Answer 1

try this (SEE FIDDLE):
<div id="red" class="site-border">
<div id="white" class="site-border">
<div id="blue" class="site-border">
<div id="content"></div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#content {
height: 500px;
background: #e3e3e3;
padding: 16px;
}
.site-border {
width:100%;
}
#red {
border: 16px solid #CC092F;
}
#white {
border: 16px solid #fff;
}
#blue {
border: 16px solid #0C144E;
}

Answer 2

Instead of scaling, you should use the below properties in your CSS, this way, the borders and paddings will be counted inside the element instead of outside as normal box model does.
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Also, you shouldn't use position: absolute; cuz I don't see any reason of using that over here.

Answer 3

You could try this css:
div {
width: 100px;
height: 200px;
border: 3px solid navy;
outline: 3px solid #fff;
box-shadow: 0 0 0px 6px darkred;
}
Fiddle: http://jsfiddle.net/BXFUk/2/