border-radiusとoverflow:hiddenをしたときの各ブラウザの挙動の違い

最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。
そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。

border-radiusを掛けた要素にoverflow:hiddenを掛けたときの挙動が各ブラウザでちょっと違います。
そんなわけでそのまとめです。

とりあえずデモを用意したのでこれを見ながら解説です。

[css]
.box1 {
border-radius: 30px;
border: 5px solid #999;
overflow: hidden;
}
[/css]

これでIE9,firefoxは問題なく内側の要素も丸く切り取られて表示されます。
しかし、chrome等のWebkit系、Operaではう内側の要素がborderに重なって表示されてしまいます。

Operaだと解決方を発見できなかったので、Operaもターゲットにする場合諦めるか、before,after等で角丸の画像を上に重ねる等で対処が必要です。

Webkit系の場合、よく見るとわかりますが、borderの外側の境界線からはみ出た部分は見えなくなっています。
というわけで、内側にdivをもう一つ用意して、

[css]
.box1 {
border-radius: 30px;
border: 5px solid #999;
overflow: hidden;
}
.box2 {
border-radius: 25px;
overflow:hidden;
}

[/css]

内側のdivにborder無しの角丸を作ってあげて、overflow:hiddenをしてやると、ちゃんと隠れます。
このときのborder-radiusの数字は、外側の角丸の大きさ-border-paddingとしてやると綺麗になります。

この場合外側の角丸は30px、borderの幅は5pxなので、内側の角丸は25pxです。

ただし、この場合、position:relativeが境界線になっているボックスや、その子要素等にかかって居ると、overflow:hiddenが無視されて表示がされてしまいます。これもWebkit限定みたいです。

ちょっとIEが良い子に見えてきますね。アニメーション周りは酷いですが・・・・

これはバグなのか仕様なのかちょっと解りませんが、使う際はブラウザチェックを忘れずに!!!