TOP  >  CSS・スタイルシートTIPS  >  tableにborder-radiusを指定しても効かない?角丸をtableをCSS3で実装する際の注意点

2011年08月20日 15:31

tableにborder-radiusを指定しても効かない?角丸をtableをCSS3で実装する際の注意点

tableを角丸のデザインにしたい場合、
画像やCSSの背景画像を使って―というやり方が一般的(?)でしたが、
CSS3のborder-radiusを使って、
簡単に角丸のデザインのtableを実装することができるようになりました。

単純にtableにborder-radiusを指定するだけなのですが、
1点だけ注意が必要です。

それは、
「border-collapseでcollapseを指定すると角丸が効かない」
ということです。




reset.cssで指定していたりした場合、
結構ハマってしまう恐れがあります…

ここに気づくのに結構な時間を割いてしまったので忘備録として。

TOP  >  CSS・スタイルシートTIPS  >  tableにborder-radiusを指定しても効かない?角丸をtableをCSS3で実装する際の注意点




正当なCSSです!