Tag: CSS3

You cannot give a whole table (<table>) rounded corners using CSS, browsers will ignore it, you must round the corners of the cells (<td>) inside.

The following uses CSS2 selectors (:first-child etc) and CSS3’s corner-rounding border-radius to selectively round the outer corners of the cells in the corners.
This will work for any size table.

table.rounded-corners tr:first-child td:first-child {
	border-top-left-radius: 5px;
}
table.rounded-corners tr:first-child td:last-child {
	border-top-right-radius: 5px;
}
table.rounded-corners tr:last-child td:first-child {
	border-bottom-left-radius: 5px;
}
table.rounded-corners tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
}