title: simulate "inner border" in CSS?
body: <p>I have the following 4 divs with the CSS below.  The problem is, the border on the red span draws over the others.  How can I avoid this?  I tried adding margins to spanRed, even negative margins, neither of which worked.</p>
  
  <p><a href="http://jsfiddle.net/eh9rM/" rel="nofollow noreferrer">http://jsfiddle.net/eh9rM/</a></p>
  
  <p><strong>Bonus points</strong> This doesn't work in IE (8,9 tested) at all... only the blue div shows up. :)</p>
  
  <pre><code>&lt;div id="spanBlue"&gt;&lt;/div&gt;
  &lt;div id="spanGreen"&gt;&lt;/div&gt;
  &lt;div id="spanOrange"&gt;&lt;/div&gt;
  &lt;div id="spanRed"&gt;&lt;/div&gt;
  
  
  #spanBlue      {position: fixed;
                  top: 0px; left: 0px;
                  height: 100%;
                  width: 10%;
                  background-color: #4D9DB8;
                  border-right: 10px solid #045B6F;
                  z-index: 1;}    
  
  #spanGreen     {position: fixed;
                  top: 0px; left: 0px;
                  height: 10%;
                  width: 100%;
                  background-color: #A4AC79;
                  border-bottom: 10px solid #34655F;
                  z-index: 1;}    
  
  #spanOrange    {position: fixed;
                  top: 0px; left: 0px;
                  height: 10%;
                  width: 10%;
                  background-color: #FA9D26;
                  border-right: 10px solid #045B6F;
                  z-index: 2;}         
  
  #spanRed       {position: fixed;
                  bottom: 0px; right: 0px;
                  height: 90%;
                  width: 90%;
                  background-color: WHITE;
                  margin-top: 20px;
                  margin-left: 20px;
                  border-top: 10px solid #B52024;
                  border-left: 10px solid #B52024;
                  z-index: 3;}     
  </code></pre>