イヨノート

Design, Code and other chaos included.

css: borderの接合

2011.12.19

#bookmark-ribonのチートシートを見ていて思い出したのだけれど、以前、tableのセル (th/td) にborderを指定した際の、上下左右の接合の仕方が違う気がしたので試してみる。

(bookmark ribon)

divにborderを指定した場合 (#bookmark-ribbon)

#bookmark-ribbon {
    width: 80px;
    height: 80px;
    border-top: 50px solid blue;
    border-left: 50px solid red;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
}

tableのtdにborderを指定した場合

 
 
table#border-test td {
    width: 80px;
    height: 80px;
    border-top: 50px solid blue;
    border-left: 50px solid red;
    border-right: 50px solid red;
    border-bottom: 50px solid blue;
}

結果

divのborderの接合部に関してはどのブラウザも同じ表示。セルのborderの接合部はバラバラ。