Table with rounded border using CSS

Issue

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!

Solution

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.

Answered By - Sildoreth