In my solution, everything looks correct.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
font-family: Avenir, Helvetica, Arial, sans-serif;
width: 100%;
background-color: #ffffff;
border-collapse: separate;
border-spacing: 0;
}
table tr th,
table tr td {
border-right: 2px solid #dedede;
border-bottom: 2px solid #dedede;
padding: 10px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 2px solid #dedede;
}
table tr th:first-child,
table tr td:first-child {
border-left: 2px solid #dedede;
}
table tr th {
background: #eee;
text-align: left;
border-top: solid 2px #dedede;
}
table td:last-child {
background-color: #edf2f4;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 10px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 10px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<!-- language: lang-html -->
<div>
<table>
<tr>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</div>
<!-- end snippet -->
If you want a CSS-only solution (no need to set `cellspacing=0` in the HTML) that allows for 1px borders (which you can't do with the `border-spacing: 0` solution), I prefer to do the following:
- Set a `border-right` and `border-bottom` for your table cells (`td` and `th`)
- Give the cells in the **first row** a `border-top`
- Give the cells in the **first column** a `border-left`
- Using the `first-child` and `last-child` selectors, round the appropriate corners for the table cells in the four corners.
[See a demo here.](http://codepen.io/mlms13/pen/CGgLF)
Given the following HTML:
SEE example below:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
text-align: left;
border-top: solid 1px #bbb;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<!-- language: lang-html -->
<div>
<table>
<tr>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</div>
<!-- end snippet -->
