title: Adding background covers rounded corner [CSS/Twitter's Bootstrap]
body: <p>I'm using Twitter's <a href="http://twitter.github.com/bootstrap/" rel="nofollow">Bootstrap</a> to give my site a consistent look, and I'm running into issues when I add a background to a table's <code>thead tr</code>. Here's CSS from Bootstrap:</p>
  
  <pre><code>.table-bordered {
    border: 1px solid #ddd;
    border-collapse: separate;
    *border-collapse: collapsed;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
  .table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    border-radius: 4px 0 0 0;
  }
  </code></pre>
  
  <p>Here's my CSS:</p>
  
  <pre><code>tr.title
  {
      background-color: #2c2c2c;
      background-image: -moz-linear-gradient(top, #333333, #222222);
      background-image: -ms-linear-gradient(top, #333333, #222222);
      background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
      background-image: -webkit-linear-gradient(top, #333333, #222222);
      background-image: -o-linear-gradient(top, #333333, #222222);
      background-image: linear-gradient(top, #333333, #222222);
      background-repeat: repeat-x;
  }
  </code></pre>
  
  <p>And the relevant HTML:</p>
  
  <pre><code>&lt;thead&gt;
  &lt;tr class="title"&gt;
  &lt;th colspan="5"&gt;&lt;strong&gt;&lt;a href="{$url}"&gt;{$name}&lt;/a&gt;&lt;/strong&gt;&lt;br /&gt;{$description}&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  </code></pre>
  
  <p>The problem is that the top left rounded corner gets removed with the <code>.title</code> background. When I remove the background code it comes back. How can I fix this?</p>