Table with rounded border using CSS - html

Question

I have an issue. I have a table made with pure HTML code, here is it:
<table id="calendarTable">
<tr>
<th id="tableHeader" colspan=7></th>
</tr>
<tr>
<th>Dom</th>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
<th>Sáb</th>
</tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan=7>
<p>
<form id="dateChooser" name="dateChooser">
<select name="chooseMonth" onChange="populateTable(this.form)">
<option selected>Janeiro
<option>Fevereiro
<option>Março
<option>Abril
<option>Maio
<option>Junho
<option>Julho
<option>Agosto
<option>Setembro
<option>Outubro
<option>Novembro
<option>Dezembro
</select>
<select name="chooseYear" onChange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
Here is my CSS:
#calendarTable {
text-align: center;
width: 80%;
height: 100%;
color: #18B6E6;
border-color: #18B6E6;
border: solid 1px;
border-radius: 20px;
}
#calendarTable td {
border: solid 1px;
border-radius: 4px;
}
#calendarTable th {
border: solid 1px;
font-weight: 700;
}
I want to round the borders using only CSS, I just tried using the border-radius property but my table is not changing borders.
Anyone have a tip for me?
Thanks in advance!

Answer 1

Here's a simplified table with border radius applied. The trick is to set the left border of the cell rather than the table itself. It'll work with or without a thead and I've annotated the css to show what I'm doing.
/*
* First normalise some of the attributes
*/
table td,
table th {
padding: .5rem;
text-align: left;
vertical-align: top;
}
/*
* Add the border, set border spacing etc
* The left width is 0 so cell border can be applied without doubling up.
*/
.table-bordered {
border: 1px solid silver;
border-left-width: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 1rem;
}
/*
* Add the border to table cell/header
*/
.table-bordered td,
.table-bordered th {
border-top: 1px solid silver;
border-left: 1px solid silver;
}
/*
* Remove the top border from the first header/cell
*/
.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
border-top-width: 0;
}
/*
* Set the border radius for the first header/cell
*/
.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
border-top-left-radius: 1rem;
}
/*
* Set the border radius for the last header/cell
*/
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
border-bottom-left-radius: 1rem;
}
<table class="table-bordered">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>

Answer 2

As others have said, this is the code that should give the look you want.
Code
#RoundedTable {
border: 1px solid black;
border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
border: 1px solid gray;
border-radius: 10px;
padding: 3px;
}
<table id="RoundedTable">
<tr><th>Table header</th><th>Another header cell</th></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
</table>
Caveat
For this to work, though, you need to make sure that border-collapse is set to separate instead of collapse for your table. Otherwise, neither the radius for the cells nor the radius for the whole table will work.
So look through the other CSS that may be affecting your table. If you find border-collapse: collapse; anywhere, that's the problem.

Answer 3

#calendarTable{
border-radius:20px;
}
DEMO

Answer 4

Remove the border attribute on the table. It is still supported in browsers, but it is removed from HTML5 specification. The effect that attribute makes is probably not what you want anyways.
If you want border around each cell in your table just specify that in CSS and include border-radius there as well.
I.e.
#calendarTable td { border: solid 1px; border-radius: 4px; }
If you just want border around the whole table, use the same css on table selector:
#calendarTable { border: solid 1px; border-radius: 4px; }

Answer 5

border-radius seems to work both on table and td elements, with or without the border attribute on table.
You must have some other CSS rules coming into play.
table {
border: 1px solid blue;
border-radius: 10px;
}
table td, table th {
border: 1px solid gray;
border-radius: 10px;
padding: 5px;
}
<table border=1>
<tr>
<th>Table header...</th>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
</table>