[CSS]border-radiusでtableに角丸を適用させる

CSS

table {
	border-collapse: separate;
	border-spacing: 0;
	border-top: 1px solid #dedede;
	border-left: 1px solid #dedede;
	border-radius: 6px;
}
table tr td {
	padding:10px;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}
table tr:first-child td:last-child {
	border-radius: 0 6px 0 0;
}
table tr:last-child td:first-child {
	border-radius: 0 0 0 6px;
}
table tr:last-child td:last-child {
	border-radius: 0 0 6px 0;
}

HTML

<table>
	<tr><td>都道府県</td><td>県庁所在地</td></tr>
	<tr><td>大阪府</td><td>大阪市</td></tr>
	<tr><td>兵庫県</td><td>神戸市</td></tr>
	<tr><td>京都府</td><td>京都市</td></tr>
</table>

デモ