Is there a clean way to get borders on a <tbody /> in pure CSS?

I’d like to set a background and a rounded border on a <tbody/>, such as

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; }

However, when I try this in Codepen, the border and background color display, but the <tbody/> still has square corners.

I’m able to work around this problem using a series of :last-child and :first-child selectors to apply the radius to individual tds on the corners, as for example

tbody tr:first-child td:first-child { border-top-left-radius: 15px; }

This version does what I want (at least, under firefox) but also feels extremely verbose and hacky, a problem that’ll only get worse when I add the prefixed versions for compatibility (-moz-, -webkit- etc), and support for <th/> elements in addition to <td/>. Is there a succinct, pure-css way of getting this behavior?


solution

Assuming you have collapsed the borders in the table, simply set display:block on the tbody and apply the border-radius.

Codepen example

CSS

table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  width: 600px;
}

tbody {
  background: #ccf;
  border: 1px solid black;
  border-radius: 15px;
  display: block;
}

th, td {
  width: 200px;
}

td, th {
  padding: 5px;
  text-align: center;
}