title: HTML Table THEAD Element Background color not rounding
body: <p>I have the following HTML &amp; CSS</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;table class="StandardTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;A&lt;/th&gt;
              &lt;th&gt;B&lt;/th&gt;
              &lt;th&gt;C&lt;/th&gt;
              &lt;th&gt;D&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td style="width: 25%"&gt;A&lt;/td&gt;
              &lt;td style="width: 25%"&gt;B&lt;/td&gt;
              &lt;td style="width: 25%"&gt;C&lt;/td&gt;
              &lt;td style="width: 25%"&gt;D&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.StandardTable {
      border: 1px solid #656565;
      border-radius: 10px;
      -moz-border-radius: 10px;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 10px 10px 5px #888888;
      width: 300px;
      margin-bottom: 15px;
      border-spacing: 0;
  }
  .StandardTable thead {
      border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 5px;
      background-color: lightgray;
  }
  </code></pre>
  
  <p>I have created the <a href="http://jsfiddle.net/n929m/" rel="nofollow">jsFiddle</a> for this too.  The background in the THEAD always bleeds / runs out of the border and does not round.</p>
  
  <p>I tested in IE, FF, and chrome.  It is most apparent in chrome because the bleed happens above the border where in IE and FF the bleed happens under.</p>
  
  <p>Any help in fixing the issue (make the background stop correctly around the edges), is greatly appreciated.  I did try to add Border-Radius on TH element, but that did not work.</p>