Hi hope everyone is good today,
I’m wondering if it’s possible to create a rounded corner on my table with the CSS3 ‘border-radius: 15px;’
as you can see the border is set to collapse, theres a little styling, is it possible with pure CSS?
Please reveiw and let me know
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css" media="projection, screen" >
body table {
border-collapse : collapse;
font-size: 16px;
margin : 0 0 20px 20px;
}
table td {
padding : 0 5px;
}
table caption {
font-size : 18px;
letter-spacing: 5px;
text-align : center;
margin-bottom : 10px;
}
table thead {
border : 2px solid rgb(190, 026, 018);
border-width : 2px 2px 0 2px;
background: rgba(190, 026, 018,0.6);
}
table thead tr {
height : 40px;
}
table thead th {
padding : 0 5px;
letter-spacing: 2px;
}
table tbody {
border : 2px solid rgb(179, 177, 177);
border-color : rgb(179, 177, 177) rgb(190, 026, 018) rgb(179, 177, 177) rgb(190, 026, 018);
}
table tfoot {
border : 2px solid rgb(190, 026, 018);
border-width : 0 2px 2px 2px;
text-align: center;
background : rgba(190, 026, 018,0.6);
}
table tr {
height : 40px;
}
table tbody tr:nth-of-type(2n+1) {
background-color:rgba(152,228,215,0.6);
}
table col.firstColumn {
width : 22%;
}
table col.middleColumns {
width : 31%;
}
table col.lastColumn {
width: 16%;
}
</style>
<title>A table of Numbers for house's</title>
</head>
<body>
<table>
<caption>Building Models</caption>
<colgroup>
<col class="firstColumn" />
<col class="middleColumns" span="2" />
<col class="lastColumn" />
</colgroup>
<thead>
<tr>
<th>Model</th>
<th>Total Sq. Ft.</th>
<th>Sphere Size</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td colspan="2">Call us about custom pricing!</td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Class IA</td>
<td>4700 square ft.</td>
<td>50 ft. 5/8 sphere</td>
<td>$150,000</td>
</tr>
<tr>
<td>Class IB</td>
<td>4700 square ft.</td>
<td>35 ft. 5/8 sphere</td>
<td>$125,000</td>
</tr>
<tr>
<td>Class IIA</td>
<td>4700 square ft.</td>
<td>50 ft. 5/8 sphere</td>
<td>$112,000</td>
</tr>
<tr>
<td>Class IIB</td>
<td>4700 square ft.</td>
<td>35 ft. 5/8 sphere</td>
<td>$97,000</td>
</tr>
<tr>
<td>Class IIIA</td>
<td>4700 square ft.</td>
<td>45 ft. 5/8 sphere</td>
<td>$84,000</td>
</tr>
<tr>
<td>Class IIIB</td>
<td>4700 square ft.</td>
<td>35 ft. 5/8 sphere</td>
<td>$73,000</td>
</tr>
</tbody>
</table>
</body>