【CSS】テーブル四隅が角丸の見出し（th）に背景色をつける

thの最初と最後の要素にborder-radiusを指定する方法でも可能です。もっと短く記述する方法がないかと思い、今回の記事を作成しました。

結論

See the Pen テーブル by ユイト (@yuito_miki) on CodePen.

thを囲っているtrにclip-pathのroundオプションを設定する。

tr:has(>th){
  clip-path: inset(0 round var(--edge) var(--edge) 0 0);
  background-color: #aff9ff;
}

参考