フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

ChromeとSafariでiframeにborder-radiusが効かない

解決策としては、外側をブロック要素で囲ってやって、それにborder-radiusoverflow:hiddenをかけてあげ、position:relativeを指定すると角丸に切り抜くことができます。

<div>
  <iframe src="hogehoge" width="500" height="500"></iframe>
</div>
div {
  position:relative;
  overflow:hidden;
  border-radius: 50%;
}

デモ

このバグ(?)はz-indexが関係しているらしくposition:staticでは切り抜けません。 逆にz-indexが効くrelativeabsolutefixedでも切り抜くことができるようです。

ちなみにiframe自体にborder-radiusをかけて内容を切り抜くことは現状無理そうでした。