html - solving table rounded corner css -

i have css rule rounded corner

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;} 

my html table is

<table >     <tbody>       <tr >         <td >hello</td><td >hello</td>       </tr>       <tr >          <td >hello</td><td >hello</td>       </tr>       <tr >          <td >hello</td><td >hello</td>       </tr>       <tr >       <td >hello</td><td >hello</td>       </tr>     </tbody>   </table> 

which gives me this

how fix promlem, td elements within table , in middle of table have rounded corners too. need first row , last row have rounded corners

assuming table's html resembles following:

<table>     <thead>         <tr>             <th>first column</th>             <th>second column</th>         </tr>     </thead>     <tbody>         <tr>             <td>row one, cell one</td>             <td>row one, cell two</td>         </tr>         <tr>             <td>row two, cell one</td>             <td>row two, cell two</td>         </tr>         <tr>             <td>row three, cell one</td>             <td>row four, cell two</td>         </tr>     </tbody> </table> 

the following css should work:

table {     border-spacing: 0; } th, td {     border: 1px solid #000;     padding: 0.5em 1em; } /* first 'th' within first 'tr' of 'thead': */ thead tr:first-child th:first-child {     border-radius: 0.6em 0 0 0; } /* last 'th' within first 'tr' of 'thead': */ thead tr:first-child th:last-child {     border-radius: 0 0.6em 0 0; } /* first 'td' within last 'tr' of 'tbody': */ tbody tr:last-child td:first-child {     border-radius: 0 0 0 0.6em; } /* last 'td' within last 'tr' of 'tbody': */ tbody tr:last-child td:last-child {     border-radius: 0 0 0.6em 0; } 

js fiddle demo.

edited in response question op:

the border within table little think, how make 1px

the borders between cells little thick, because left border of 1 cell against right border of previous cells (and same top/bottom borders).

one way remove effect specify border-collapse: collapse; on table element. unfortunately effect of also remove/unset/override border-radius declarations: demo.

the more complicated way manually remove top-borders rows previous row, , left-border of cell follows cell, adding following previous css:

thead + tbody tr td, tr + tr td {     border-top: 0; }  tr th + th, tr td + td {     border-left: 0; } 

js fiddle demo.

edited reduce make css more durable (for single-cell rows, addition of tfoot or removal of thead):

table {     border-spacing: 0; } th, td {     border: 1px solid #000;     padding: 0.5em 1em; } thead tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {     border-top-left-radius: 0.6em; } thead tr:first-child th:last-child, tbody:first-child tr:first-child td:last-child {     border-top-right-radius: 0.6em; }  thead + tbody tr:last-child td:first-child, tfoot tr:last-child td:first-child {     border-bottom-left-radius: 0.6em; } thead + tbody tr:last-child td:last-child, tfoot tr:last-child td:last-child {     border-bottom-right-radius: 0.6em; }  thead + tbody tr td, tfoot + tbody tr td, tfoot tr td, tbody + tbody tr td, tr + tr td {     border-top: 0; }  tr th + th, tr td + td {     border-left: 0; } 

js fiddle demo.

there problem multiple tbody elements, in absence of tfoot element, in first tbody retain border-radius on lower borders.