title: Multiple borders around a div with a transparent layer
body: <p>I am trying to create a button with 3 layers of border around it with the middle layer showing the background of the containing div.  Examples are worth a thousand words so here you go </p>
  
  <p><a href="http://jsfiddle.net/e5Sxt/2/" rel="nofollow">http://jsfiddle.net/e5Sxt/2/</a></p>
  
  <p>html</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;p&gt;Generic Content&lt;/p&gt;
      &lt;button class="button"&gt;Search&lt;/button&gt;
  &lt;/div&gt;        
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#content{
      width: 500px;
      height: 500px;
      background-color: black;
      padding: 50px;
      color: white;
  }
  
  button{
      margin-top: 50px;
      padding: 20px;
      text-align: center;
      background-color: #333;
      box-shadow: 0 0 0 5px #666, 0 0 0 10px red, 0 0 0 15px #bbb;
      border: none;
      cursor: pointer;
  }
  </code></pre>
  
  <p>The red box-shadow is where the black of the containing div should come through.  If the box-shadow is set to transparent for this layer, the box-shadow under it shows through instead.</p>
  
  <p>I have tried utilizing outlines, borders, and box-shadows to no avail so far.  As of right now, I think I will have to wrap the button in another div with the outer border and a padding to show the background, but wanted to see if anyone could do this without adding another html element.</p>
  
  <p>Thanks!</p>