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

CSS

2019.01.03

CSS
HTML
デモ

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

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>

<table>