CSS3 tableの角丸

by goropoo

HTML

<table width="500" class="radius" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
    <tr>
        <th>角丸テスト</th>
        <td>IEは対応してないよ</td>
    </tr>
</table>

CSS

table.radius {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 12px;
    color: #fff;
    padding: 3px;
    background: #000;
}
table.radius tr th, table.radius tr td {
    padding: 5px;
}
table.radius tr th {
    background: #090;
}
table.radius tr td {
    background: #36f;
}