Runda hörn (border-radius)

Tabell 1

Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7

Tabell 2

Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7

Tabell 3

Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7

Tabell 4

Cell 2 Cell 3 Cell 4
Cell 5 Cell 6 Cell 7

Tabell 1

.table1 {
width: 400px;
float: left;
margin: 10px;
padding: 15px;
background-color: #95B995;
border-radius: 30px;
}

.table_cell1 {
border: 1px solid #fff;
border-radius: 10px;
}

Tabell 2

.table2 {
width: 400px;
float: left;
margin: 10px;
padding: 10px;
background-color: #95B995;
border-radius: 15px;
}

.table_cell2 {
background: #fff;
border-radius: 5px;
}

Tabell 3

.table3 {
width: 400px;
float: left;
clear: left;
margin: 10px;
padding: 10px;
border: 1px solid #95B995;
border-radius: 15px;
}

.table_cell3 {
border: 1px solid #95B995;
border-radius: 5px;
}

Tabell 4

.table4 {
width: 400px;
float: left;
margin: 10px;
padding: 20px;
border: 3px solid #95B995;
border-radius: 20px 90px 0 0;
}

.table_cell4 {
border: 1px solid #95B995;
border-radius: 5px;
}

HTML-kod till tabellerna:

<table class="table1" border="0" cellpadding="8" cellspacing="3">
<tr>
<td colspan="3"><h2>Tabell</h2></td>
</tr>
<tr>
<td class="table_cell1">Cell 2</td>
<td class="table_cell1">Cell 3</td>
<td class="table_cell1">Cell 4</td>
</tr>
<tr>
<td class="table_cell1">Cell 5</td>
<td class="table_cell1">Cell 6</td>
<td class="table_cell1">Cell 7</td>
</tr>
</table>