Закругляем углы таблицы

закруглить углы таблицы, используя только CSS.

by Denis Tverdokhlebov

HTML

<table class="bContentTables" style="overflow:hidden;">

  <tr class="bCTable_Header tDevice_Propertyes_tr1">
    <td align="center"><strong>Curabitur a ultricies urna</strong>
    </td>
    <td align="center"><strong>Phasellus mollis</strong>
    </td>
  </tr>

  <tr class="tDevice_Propertyes_tr2">
    <td>eget venenatis est tortor et est.</td>
    <td align="center">0</td>
  </tr>

  <tr class="tDevice_Propertyes_tr1">
    <td>Fusce sollicitudin metus quis libero auctor vestibulum.
    </td>
    <td align="center">0</td>
  </tr>

  <tr class="tDevice_Propertyes_tr2">
    <td>eget venenatis est tortor et est.</td>
    <td align="center">0</td>
  </tr>

  <tr class="tDevice_Propertyes_tr1">
    <td>Fusce sollicitudin metus quis libero auctor vestibulum.
    </td>
    <td align="center">0</td>
  </tr>

</table>

CSS

.bContentTables {
  border: 1px solid #CCCCCC;
  width: 100%;
  moz-border-radius: 10px;
  /* Firefox */
  -webkit-border-radius: 10px;
  /* Safari, Google Chrome */
  -khtml-border-radius: 10px;
  /* KHTML */
  -o-border-radius: 10px;
  /* Opera */
  -ms-border-radius: 10px;
  /* IE8 */
  border-radius: 10px;
  /* CSS3 */
  overflow: hidden;
  margin: 0.7em auto;
}

tr.bCTable_Header {
  background: none;
}

tr.bCTable_Header:first-child>td:first-child {
  border-radius: 10px 0px 0 0;
  -webkit-border-radius: 10px 0 0 0;
  -moz-border-radius: 10px 0 0 0;
  -ms-border-radius: 10px 0 0 0;
  -o-border-radius: 10px 0 0 0;
  -khtml-border-radius: 10px 0 0 0;
}

tr.bCTable_Header td {
  color: white;
  font-size: 110%;
  background-color: #00843C;
}

tr.bCTable_Header:first-child>td:last-child {
  border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  -moz-border-radius: 0 10px 0 0;
  -ms-border-radius: 0 10px 0 0;
  -o-border-radius: 0 10px 0 0;
  -khtml-border-radius: 0 10px 0 0;
}

.bContentTables tr:last-child {
  border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -ms-border-radius: 0 0 10px 10px;
  -o-border-radius: 0 0 10px 10px;
  -khtml-border-radius: 0 0 10px 10px;
  background: none;
}

.bContentTables tr:last-child td {
  background-color: #F1F1F2;
}

.bContentTables tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
  -webkit-border-radius: 0 0 0 10px;
  -moz-border-radius: 0 0 0 10px;
  -ms-border-radius: 0 0 0 10px;
  -o-border-radius: 0 0 0 10px;
  -khtml-border-radius: 0 0 0 10px;
}

.bContentTables tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
  -webkit-border-radius: 0 0 10px 0;
  -moz-border-radius: 0 0 10px 0;
  -ms-border-radius: 0 0 10px 0;
  -o-border-radius: 0 0 10px 0;
  -khtml-border-radius: 0 0 10px 0;
}