title: border-bottom + rounded corners in a table
body: <p>I am trying to combine in a table rounded corners for td elements and border-bottom for tr elements, to get a tab-like look (I can't change the html structure).</p>
  
  <p>Demo: <a href="http://jsfiddle.net/VvdBQ/" rel="nofollow">http://jsfiddle.net/VvdBQ/</a></p>
  
  <p>Code:</p>
  
  <pre><code>table#one {width:100%;border-spacing:0;border-collapse:separate;}
  tr {border-bottom:5px solid red;}
  td {font-weight:bold;text-align:center;background:blue;border-radius:15px 15px 0 0;border:1px solid green;}
  </code></pre>
  
  <p>My issue (viewed in Chrome):</p>
  
  <ul>
  <li>with <code>border-collapse:separate</code> the corners are correctly rounded but I don't see the bottom border</li>
  <li>with <code>border-collapse:collapse</code> it is the opposite</li>
  </ul>
  
  <p>How can I get both the corners and the bottom border correct?</p>