CSS Borders workaround <p>On a site I'm building I want to have a 3 coloured border <a href="http://i40.tinypic.com/2mw8lkj.jpg" rel="nofollow">example here</a> for the body. </p> <p>What is the easiest way to create this? </p> <p>I tried the following but it didn't work out how I expected it to: </p> <pre><code>&lt;div id="red"&gt; &lt;div id="white"&gt; &lt;div id="blue"&gt; &lt;!--SITE GOES HERE--&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; #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; } </code></pre> <p>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.</p>