rounding the corners of html table body

Question

Here is a fiddle

My attempt to round the corners of a tbody element has been unsuccessful.

I was able to round the corners of a tr element in the tbody with the following

CSS

.tr .rounded-corners {

  height: 225px;
  width: 250px;
  display: inline-block;
  padding: 10px;
  margin-top: 10px;
  box-shadow: 2px 2px 7px #888888;
  border-radius: 7px;
  cursor: pointer;
  cursor: hand;
}

However, when I try to do a similar style with tbody the corners are not rounded?

.tbody .rounded {

  background: red;
  border-radius: 7px;
}

The background does appear red.

Answer 1

If your table is set to border-collapse: separate (the default) then the border radius may, or may not be applied to the <tbody>, depending on the browser; the behaviour is undefined in the specifications.

According to the specs — CSS Backgrounds and Borders Module Level 3 (emphasis mine):

The effect of border-radius on internal table elements is undefined in CSS3 Backgrounds and Borders, but may be defined in a future specification. CSS3 UAs should ignore border-radius properties applied to internal table elements when ‘border-collapse’ is ‘collapse’.

For consistent results, based on your example, you would have to set the tbody to display: block as suggested in this answer. This will break the table behaviour somewhat, but could be useful.

Answer 2

try this.,

.bodytable {
  background:blue;
  border-radius: 7px;
  display: inline-block;
}