border-collapse: collapse;を指定していると角丸テーブルにならない

CSS3のおかげで以前（いつ）と比べて、テーブルも角丸にするのは、容易くはなりました。ですが、それでもテーブルを角丸にするのには、厄介な場合が多いです。

border-collapseに注意せよ

角丸にするには、table要素にborder-radiusを指定すればOKかと思いきや、 最初と最後の行にあるthやtdにもborder-radiusを指定しなければならなかったりするわけですが、それでも角丸にならない場合、ここで注意しないといけないのが、 border-collapse: collapse;の指定です。

border-collapseはReset CSSで使われているケースが多い

注意したいのは、有名どころのReset CSSです。

僕はReset CSSを使っていないのですが、border-collapse: collapse;は、 有名どころのReset CSS（YUI、Eric Meyer's "Reset CSS"など）では、table要素にborder-collapse: collapse;が指定されています。 なので、無意識にborder-collapse: collapse;を指定していることになります。

隣接するセルが重なるから？

border-collapse: collapse;の指定が、隣接するセルのボーダーを重ねて表示するからだと思うのですが、 そもそも角丸になる部分は重なるセルがない箇所になると思うのですが、とにかくborder-collapse: collapse;を指定していると角丸テーブルになりませんでした。

なんでやねん、と思うところは多々（謎）ありますが、角丸テーブルにしようとしてならなかった場合は、一度border-collapseプロパティをご確認ください。