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

Question

I would like to set the background and the rounded border to <tbody/> , for example

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

However, when I try to do this in Codepen , a colored and colored background is displayed, but <tbody/> still have square corners.

I can get around this problem by using a series of :last-child and :first-child selectors to apply the radius to the individual td at the corners, 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 will only get worse when I add prefix versions for compatibility ( -moz- , -webkit- and t .d.) and support for <th/> elements in addition to <td/> . Is there a compressed, clean-css way to get this behavior?

Answer 1

Assuming you collapsed the borders in the table, just set display:block to tbody and apply 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; }