How can I round the thead th corners for a rounded table header?

Question

I am trying to round the table header thead th on the far left and far right. I have them rounded but the underlying tr is poking its background color through leaving me with two th's with a rounded corner but with a sharp edge poking through from the thead tr.

I've tried playing around in the Firefox inspect element to apply CSS in real time but I cannot get the sharp edges to go away.

 table thead tr { background-color: #005073; } table thead tr th { width: 200px; text-align: center; } table { margin-right: auto; margin-left: auto; width: 100%; border-collapse: separate; border-spacing: 0; } table tbody tr:hover { background-color: black; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #1ebbd7; } tr:first-child th:first-child { border-top-left-radius: 6px; } tr:first-child th:last-child { border-top-right-radius: 6px; } 

 <div class="contentTable"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>State</th> <th>Zip-Code</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td>212 Lift St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>2</td> <td>Todd</td> <td>331 Geromino St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>3</td> <td>Jim</td> <td>1222 Jumbo Ln.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>4</td> <td>Susan</td> <td>888 Bambi Way</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>5</td> <td>James</td> <td>112 Falcon Dr.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>6</td> <td>Abby</td> <td>6219 Pumpkin Ln.</td> <td>Ohio</td> <td>43233</td> </tr> </tbody> </table> </div> 

Answer 1

Change

 table thead tr {
     background-color: #005073;
 }

to

 table thead th {
     background-color: #005073;
 }

Answer 2

You could achieve your desired effect by applying border-radius: 6px 6px 0px 0px; to the entire table and giving it overflow: hidden .

 table thead tr { background-color: #005073; } table thead tr th { width: 200px; text-align: center; } table { margin-right: auto; margin-left: auto; width: 100%; border-collapse: separate; border-spacing: 0; } table tbody tr:hover { background-color: black; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #1ebbd7; } table { border-radius: 6px 6px 0px 0px; overflow: hidden; } 

 <div class="contentTable"> <table> <thead> <tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>State</th> <th>Zip-Code</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Bob</td> <td>212 Lift St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>2</td> <td>Todd</td> <td>331 Geromino St.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>3</td> <td>Jim</td> <td>1222 Jumbo Ln.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>4</td> <td>Susan</td> <td>888 Bambi Way</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>5</td> <td>James</td> <td>112 Falcon Dr.</td> <td>Ohio</td> <td>43233</td> </tr> <tr> <td>6</td> <td>Abby</td> <td>6219 Pumpkin Ln.</td> <td>Ohio</td> <td>43233</td> </tr> </tbody> </table> </div>