最新のブラウザだとベンダープレフィックス無しで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が良い子に見えてきますね。アニメーション周りは酷いですが・・・・
これはバグなのか仕様なのかちょっと解りませんが、使う際はブラウザチェックを忘れずに！！！