border: 2px ridge gray

borderプロパティーのridgeはブラウザーによってどのように違うかを軽くテストした。複数の枠線を組み合わせて作るわずかに凹んだ(凸んだ)直線の代わりに使うのは無理がありそうという結論だった。だった。だった……。

テストは以下のような簡単なCSSで行った。

.test {
  border-left: 2px ridge gray;
  height: 240px;
}
Firefox 12でのborder-left: 2px ridge grayのテストChrome 19でのborder-left: 2px ridge grayのテストSafari 5でのborder-left: 2px ridge grayのテストOpera 11でのborder-left: 2px ridge grayのテストInternet Explorer 9でのborder-left: 2px ridge grayのテスト
Left to Right: Firefox 12, Chrome 19, Safari 5, Internet Explorer 9, Opera 11

Firefox 12が一番コントラスがきつく、Chrome 19とSafari 5、Opera 11が明るい方が指定した色になりコントラストは弱い。Internet Explorer 9はこの両者の中間。色によって違う可能性もある。

RGBAで透過させると擬似的にコントラスをが低下するのでCh19あたりからぎりぎりIE9までは違和感ない程度にコントラスを合わせられるが、Fx12はちょっと無理そう。事情により複数の枠線を組み合わせられない場合はborderbox-shadowプロパティーを組み合わせて実現するというのがモダンで現実的な解っぽい。insetbox-shadowを使うとOpera 11でborderと重なって見えないバグ(?)とかにはまる(った)。