border-style に ridge, groove, outset, inset を指定した場合の各ブラウザの表示の違い

Category : CSS

あまり使うことはないと思いますが、border-styleridge, groove, outset, inset を指定した場合、各ブラウザがどのように表示するのかをまとめてみました。

テスト表示には border-width: 9px; border-color: #f00; を指定しました。
理由は違いが分かりやすいと思ったからです。

border-styleridge を指定したとき

border-style に ridge を指定したとき

意外だったのは Firefox のバージョンが 3 以下の場合は表示色が違うこと。
これは groove, outset, inset の場合でも同じです。

IE が濃い色で表示しているのが目立ちます。
それと対照的に、Firefox 3 以前は薄い色。
また、Opera と webkit系2つは外のボーダーと内のボーダーの太さが位置によって違います。
IE と Firefox は外が 5px、内が 4px になります。

border-stylegroove を指定したとき

border-style に groove を指定したとき

IE が浮いている以外は、ridge の色配置を逆にしただけになります。
外と内のボーダーの太さは ridge の場合と同じ。

border-styleoutset を指定したとき

border-style に outset を指定したとき

ここでも IE が目立ちますね。それも半端じゃなく。
IE 以外は2色で構成されているのに対し、IE は4色もあります。

border-styleinset を指定したとき

border-style に inset を指定したとき

outset の配色を逆にしただけです。


全部試したのは初めてですが、ここまで違うとは思いませんでした。

Leave a Reply