CSSで隣接するセルの枠線を重ねて表示しつつ、角丸なテーブルを作る

border-collapse: collapse;と指定すると角丸にできないので注意

html

<table>
  <thead>
    <tr>
      <th></th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>A</th>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <th>B</th>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <th>C</th>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

CSS

table{
  margin: 1em;
  border-spacing: 0;
}

thead{
  display: block;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  border-left: 1px solid #000;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

tbody{
  display: block;
  border: 1px solid #000;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

th,td{
  width: 50px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
}

thead tr:first-of-type *{
  border-bottom: none;
}

thead *:last-child,
tbody *:last-child{
  border-right: none;
} 

td + td,
th + td{
  border-bottom: 1px solid #000;
}

tbody tr:last-of-type td,
tbody tr:last-of-type th,
tbody tr:not(:last-of-type) th[rowspan]:last-of-type{
  border-bottom: none;
}

tbody tr:first-of-type th[rowspan]:first-of-type{
  border-bottom: 1px solid #000;
}

tbody tr:not(:first-of-type):not(:last-of-type) th:not(:[rowspan]){
  border-bottom: 1px solid #000 !important;
}

デザインが崩れる

テーブルの構造によりますが、崩れてしまう場合があります
崩れた場合はclassなどを使って回避する必要があります

tbodyのthにrowspanを指定