Border-radius 不是围绕我的桌子的边界而是背景颜色

Question

我正在尝试创建一个圆角表。但不是角落，而是圆形的背景颜色。

这是我的表格（在 Firefox 112.0.2 中）：

这是该表的代码（我不得不从代码中删除几行，否则我无法提交问题）：

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>

---

编辑

我有

border-collapse:collapse

还是

border-collapse:separate

并不重要——表格中的边框 within 看起来不同（折叠或分开），但外边框仍然是一个带有尖角、不圆角的矩形。

无论我使用

:last-child

还是

:last-of-type

或者

table

是否有边框都没有关系——我总是在桌子周围有一个矩形的、不圆的边框。

有趣的是，相关问题中的所有示例对我来说都是圆角的，但我无法将这些解决方案中的任何一个应用到我的表格中。我不明白我错过了什么......