Why doesn't `tbody` set the background color in a table?
<p>I am using <code>&lt;tbody&gt;</code> as a CSS selector to set the <code>background-color</code> in a table.  I'm doing this because I have multiple <code>&lt;tbody&gt;</code> sections within the table, and they have different background colors.</p>

<p>My issue is that when using <code>border-radius</code> on the cells, the cell doesn't respect the <code>background-color</code> of the <code>tbody</code>.  That is, the border radius cuts out the corners in the default background color (in this case white), not the tbody color (in this case, green), below.</p>

<p>UPDATE: This problem occurs in Chrome/Safari, but not in Firefox (just tested myself on all 3).  Still looking for a workaround on Chrome (FOUND! See accepted answer).</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}

table {
  border-spacing: 0px;
}

table tbody {
  background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;TOP LEFT&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;TOP RIGHT&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;BOT LEFT&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;BOT RIGHT&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>To be clear, the fix I'm looking for would change the resultant example so it looks like this (I'm just changing the <code>table tbody</code> selector to <code>table</code> only):</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>tr:first-child td:first-child {
  background-color: red;
  border-radius: 25px;
}

table {
  border-spacing: 0px;
}

table { /* changed this line */
  background-color: green;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;TOP LEFT&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;TOP RIGHT&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;p&gt;BOT LEFT&lt;/p&gt;&lt;/td&gt;
      &lt;td&gt;&lt;p&gt;BOT RIGHT&lt;/p&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>

<p>I don't want to do it that way, because I want the background-color to be on the <code>tbody</code> (which I have multiple ones) NOT on the whole <code>table</code>.</p>

<p>Any way to make the tbody color show through?</p>