title: Border radius html table
body: <p>I've been trying to apply some rounded corners to a table of mine, but I just can't seem to get it right. My table is being collapsed, once the <code>&lt;thead&gt;</code>is clicked on. The <code>&lt;thead&gt;</code>need to only have top rounded corners, while the last <code>&lt;tr&gt;</code> element needs to only have bottom rounded corners. I'm using bootstrap as a framework.</p>
  
  <p>Currently my design look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/UT86Y.png" alt="Current header"></p>
  
  <p><img src="https://i.stack.imgur.com/XbwU9.png" alt="Current last element"></p>
  
  <p>I want my <code>&lt;head&gt;</code> to look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/xllFh.png" alt="enter image description here"></p>
  
  <p>while the last element still have bottom rounded corners.</p>
  
  <p>table.html</p>
  
  <pre><code>&lt;table align="center" class="table table-curved" id="nextTeamTable"&gt;
      &lt;thead data-parent="#bodyContainer" data-toggle="collapse" data-target="#tbodyCollapse"&gt;
          &lt;tr&gt;
              &lt;th&gt;HeadTitle&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody class="collapse" id="tbodyCollapse"&gt;
          &lt;tr&gt;
              &lt;td&gt;Body1&lt;/td&gt;
              &lt;td&gt;Body2&lt;/td&gt;
              &lt;td&gt;Body3&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>table.css</p>
  
  <pre><code>.table-curved {
      border-collapse:separate;
      border: solid #ccc 1px;
      border-radius: 25px;
  }
  
  .table-curved tr:last-child td
  {
      border-bottom-left-radius: 25px;    
      border-bottom-right-radius: 25px;   
  }
  </code></pre>