UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【CSS】テーブルの角が丸くならない

テーブルをCSSを使って角丸にしようとborder-radiusをつけたが丸くならなかった

原因を調べたところborder-collapse: collapse;CSSがtableタグにあたっているとborder-radiusが効かないみたい

f:id:uggds:20210626162947p:plain

CSS Backgrounds and Borders Module Level 3より

border-collapse: collapse;は隣接するセルと境界線を共有するスタイルで、リセットCSSとしてmayerCSSを利用していたのでこのスタイルがあたっていた

ドキュメントによるとborder-collapse: separate;にすると角丸になるみたい