CSSでテーブル行のボーダーの角を丸くする方法

以下に、いくつかの方法とそれに対応するコード例を紹介します。

方法1: border-radiusプロパティを使用する方法 CSSのborder-radiusプロパティを使用すると、要素の角を丸くすることができます。以下のコード例では、テーブルの行のボーダーの角を10ピクセルの丸さに設定しています。

tr {
  border-radius: 10px;
}

方法2: 伪要素を使用する方法 伪要素を使用すると、テーブルの行の特定の角だけを丸くすることができます。以下のコード例では、左上と右上の角を10ピクセルの丸さに設定しています。

tr::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 10px 10px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}
tr::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 0 0 10px 10px;
  position: absolute;
  top: 0;
  right: 0;
}

方法3: テーブルセルのボーダーを非表示にし、背景色とパディングを使用する方法 テーブルセルのボーダーを非表示にし、背景色とパディングを使用して、行の角を丸く見せることもできます。以下のコード例では、左上と右上の角を10ピクセルの丸さに設定しています。

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

これらはいくつかの一般的な方法ですが、CSSにはさまざまな方法があります。デザインの要件や使用するテーブルの構造に応じて、最適な方法を選択してください。

以上が、CSSを使用してテーブル行のボーダーの角を丸くする方法についての解説です。是非、実際のプロジェクトでお試しください。