title: Solving table rounded corner CSS
body: <p>I have this CSS rule for rounded corner:</p>
  
  <pre><code>th, td { padding: 8px;
           background: #E8ECE0;
           text-align: center;
           border: 1px solid #444;
           border-bottom-width: 0px;
  }
  thead { background-color: #446bb3  ; color :#fff; padding:4px; line-height:30px }
  tbody tr:nth-child(even) {background: #F6F6EC;}
  tbody tr:nth-child(odd) {background: #FFF}
  
  tr:first-child td, tr:first-child th {
      border-top-left-radius: 12px; border-top-right-radius: 12px;
  }
  tr:last-child td {
      border-bottom: 1px solid #444;
      border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;
  }
  table { border-spacing: 0; border: 0; margin:0px; width:100%; padding:5px}
  td.pd {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}
  td.pu {border-top-left-radius: 12px; border-top-right-radius: 12px;}
  </code></pre>
  
  <p>My html table is:</p>
  
  <pre><code>&lt;table &gt;
      &lt;tbody&gt;
        &lt;tr &gt;
          &lt;td &gt;Hello&lt;/td&gt;&lt;td &gt;Hello&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr &gt;
           &lt;td &gt;Hello&lt;/td&gt;&lt;td &gt;Hello&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr &gt;
           &lt;td &gt;Hello&lt;/td&gt;&lt;td &gt;Hello&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr &gt;
        &lt;td &gt;Hello&lt;/td&gt;&lt;td &gt;Hello&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>which gives me this</p>
  
  <p><img src="https://i.stack.imgur.com/8PWba.png" alt="table with rounded corner"></p>
  
  <p>How do I fix this problem, as the td elements within the table and in the middle of the table have rounded corners too? I only need the first row and last row to have rounded corners.</p>