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

- リンク: https://torounit.com/blog/border-radius%e3%81%a8overflowhidden%e3%82%92%e3%81%97%e3%81%9f%e3%81%a8%e3%81%8d%e3%81%ae%e5%90%84%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ae%e9%81%95%e3%81%84/
- 公開日: 2011-04-30T14:49:52+09:00
- 作成者: Toro\_Unit

最新のブラウザだとベンダープレフィックス無しでborder-radiusが使えるようになりました。

そんなわけで仕事で使おうと思いましたが、ちょっとしたトラブルが。

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

とりあえず[デモ](https://torounit.com/demo/border.html)を用意したのでこれを見ながら
解説です。

[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が良い子に見えてきますね。アニメーション周りは酷いですが・・・・

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