Border-radius doesn't round the borders of my table but the background color

Question

I'm trying to create a table with rounded corners. But instead of the corners it is the background color that is rounded.

Here is what the table looks like for me (in Firefox 112.0.2):

And here is the code for that table (I had to delete a couple of rows from the code because I couldn't submit the question otherwise):

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif
}

body {
  margin: 0
}

:root {
  color-scheme: only light;
}

table {
  box-sizing: border-box;
  width: 536px;
  height: 359px;
  border-collapse: collapse;
  border: 1px solid #000;
  margin: 0 auto;
  border-radius: 12px;
}

tr:first-of-type th:first-of-type {
  border-top-left-radius: 12px;
}

tr:first-of-type th:last-of-type {
  border-top-right-radius: 12px;
}

tr:last-of-type th {
  border-bottom-left-radius: 12px;
}

tr:last-of-type td:last-child {
  border-bottom-right-radius: 12px;
}

th,
td {
  border: 1px solid #000;
  padding: 0px;
  height: 29px;
}

.pause th,
.pause td {
  height: 13px;
}

th {
  font-weight: 400;
}

th,
td {
  text-align: center;
}

td,
th {
  background-color: blue;
}

.pause td {
  background-color: transparent;
}

td.frei {
  background-color: #BDD472;
}

<table>
  <tr>
    <th>Uhrzeit</th>
    <th>Mo</th>
    <th>Di</th>
    <th>Mi</th>
    <th>Do</th>
    <th>Fr</th>
  </tr>
  <tr>
    <th>11:00–11:50</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>12:00–12:50</th>
    <td></td>
    <td></td>
    <td class="frei">frei</td>
    <td class="frei">frei</td>
    <td></td>
  </tr>

---

Edit

It does not matter whether I have border-collapse:collapse or border-collapse:separate – the borders within the table look different (collapsed or separate), but the outer border still remains a rectangle with sharp, unrounded corners.

It also doesn't matter whether I use :last-child or :last-of-type or if the table has a border or not – I always have a rectangular, unrounded border around the table.

It is interesting that all the examples in the related questions have rounded corners for me, but I cannot apply any of those solutions to my table. I don't understand what I'm missing...

Answer 1

I've use your attached code. As I can see border-collapse:collapse doesn't make the border of your table round corner.

So, setting up your table class to border-collapse:separate and adding border-spacing: 0; may get the output you want to achieve.

I don't still understand why this can't solve your problem.

I drop this just in case. Maybe this could help you or not, but looking for the snippet below, it actually work.

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  font-family: sans-serif
}

body {
  margin: 0
}

table {
  box-sizing: border-box;
  width: 536px;
  height: 359px;
  /* border-collapse: collapse; */
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #000;
  margin: 0 auto;
  border-radius: 12px;
}

tr:first-child th:first-of-type {
  border-top-left-radius: 12px;
}

tr:first-of-type th:last-of-type {
  border-top-right-radius: 12px;
}

tr:last-of-type th {
  border-bottom-left-radius: 12px;
}

tr:last-of-type td:last-child {
  border-bottom-right-radius: 12px;
}

th,
td {
  border: 1px solid #000;
  padding: 0px;
  height: 29px;
}

.pause th,
.pause td {
  height: 13px;
}

th {
  font-weight: 400;
}

th,
td {
  text-align: center;
}

td,
th {
  background-color: blue;
}

.pause td {
  background-color: transparent;
}

td.frei {
  background-color: #BDD472;
}

<table>
  <tr>
    <th>Uhrzeit</th>
    <th>Mo</th>
    <th>Di</th>
    <th>Mi</th>
    <th>Do</th>
    <th>Fr</th>
  </tr>
  <tr>
    <th>11:00–11:50</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <th>12:00–12:50</th>
    <td></td>
    <td></td>
    <td class="frei">frei</td>
    <td class="frei">frei</td>
    <td></td>
  </tr>
</table>