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

And now, in 2025, with overly nested CSS, which ought to be changed to use block and inline rather than top/left/etc.:

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

                &:last-child {
                    border-top-right-radius: 5px;
                }
            }

            &:last-child {
                td {
                    &:first-child {
                        border-bottom-left-radius: 5px;
                    }

                    &:last-child {
                        border-bottom-right-radius: 5px;
                    }
                }
            }
        }
    }
}