CSSを使用してテーブルの行にボーダーラジウスを設定する方法

1. CSSのborder-radiusプロパティを使用する方法:

table {
  border-collapse: separate;
  border-spacing: 0;
}
tr {
  border-radius: 10px;
}
td {
  padding: 10px;
  border: 1px solid black;
}

上記のコードでは、tr要素にborder-radiusプロパティを設定して、行の角を丸くします。td要素には適切なパディングとボーダーを設定しています。

2. 独自のクラスを使用する方法:

.rounded-row {
  border-radius: 10px;
}

<table>
  <tr class="rounded-row">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

上記のコードでは、rounded-rowというクラスを作成し、tr要素に適用します。これにより、指定した行だけが丸く表示されます。

3. :first-childと:last-child疑似クラスを使用する方法:

tr:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
tr:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

上記のコードでは、:first-childと:last-child疑似クラスを使用して、最初の行と最後の行の角を丸くします。

これらはいくつかのボーダーラジウスを設定する方法の一部です。必要に応じて、上記のコードを変更してデザインを調整することができます。