title: Rounded corners for html table
body: <p>I am trying to write <code>css</code> for <strong>html</strong> table rounded corners, but my style is applying <code>thread</code> also. for this I have tried below way.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tier_price_break {
    width: 225px;
  }
  
  
  /* .tier_price_break, td, th {
      border: 1px solid #ddd;
  }*/
  
  .tier_price_break,
  td {
    border: 1px solid #cde2f5;
    /*#ddd;*/
    border-radius: 8px;
  }
  
  .tier_price_break,
  th {
    border: 1px solid #cde2f5;
    /*#ddd;*/
    border-radius: 8px;
  }
  
  .tier_price_break {
    border-collapse: separate;
    float: right;
    border-spacing: 0;
  }
  
  .tier_price_break&gt;td {
    height: 15px;
  }
  
  .tier_price_break&gt;tbody&gt;tr&gt;td {
    padding: 0px 0px !important;
    border: none;
  }
  
  .tier_price_break&gt;thead&gt;tr&gt;th {
    padding: 0px 0px !important;
  }
  
  @media only screen and (max-width: 768px) {
    .tier_price_break {
      border-collapse: collapse;
      float: none !important;
    }
    .tier_price_break {
      width: 180px !important;
    }
  }
  
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /* For portrait layouts only */
    .tier_price_break {
      width: 180px !important;
    }
  }
  
  @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    /* For landscape layouts only */
    .tier_price_break {
      width: 180px !important;
    }
  }
  
  .tier_price_break&gt;tbody {
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 4px;
  }
  
  .tier_price_break tbody tr:last-child td:first-child {
    border-radius: 0 0 0 10px;
  }
  
  .tier_price_break tbody tr:last-child td:last-child {
    border-radius: 0 0 10px 0;
  }
  
  .tier_price_break thead th:first-child {
    border-radius: 10px 0 0 0;
  }
  
  .tier_price_break thead th:last-child {
    border-radius: 0 10px 0 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="tier_price_break" cellpadding="0" cellspacing="0" border="1"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th colspan="2"&gt;
          &lt;div style="text-align: center;"&gt;
            Quantity Discounts
          &lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th style="width: 50%;"&gt;
          &lt;div style="text-align: center;"&gt;
            Qty.
          &lt;/div&gt;
        &lt;/th&gt;
        &lt;th style="width: 50%;"&gt;
          &lt;div style="text-align: center;"&gt;
            Pack Price
          &lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div style="text-align: center;"&gt;
            50
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div style="text-align: center;"&gt;
            $0.28
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;div style="text-align: center;"&gt;
            500
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;div style="text-align: center;"&gt;
            $0.21
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>result</strong></p>
  
  <p><a href="https://i.stack.imgur.com/nOJKO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nOJKO.png" alt="enter image description here"></a></p>
  
  <p>I want only rounded corners for <code>html</code> table not for <code>thead</code>.</p>
  
  <p>How to do this? Any help/suggestions?</p>
  
  <p>I am trying to write <code>css</code> like below table.
  <a href="https://i.stack.imgur.com/GcRHi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GcRHi.png" alt="enter image description here"></a></p>