html - Rounded corners overlapping

Question

On safari 6 or earlier - the image overlaps the rounded border. Is there an easy fix to this? I tried adding a surrounding div with overflow:hidden but the result was the same.

The image size is not known before hand either.

http://jsfiddle.net/89VvB/

img {
    border:5px solid black;
    -webkit-border-radius:30px;
    border-radius:30px;
}

Answer 1

画像サイズが変わらない場合は、 を使用し<div>て画像を背景に設定できます。

http://jsfiddle.net/89VvB/5/を参照してください

<div>画像が表示されるように、の高さと幅を指定する必要があることに注意してください。

これも見たいかもしれません: border-radius fails under safari (醜いクリッピング)

Answer 2

境界線を捨てて、代わりに -webkit-box-shadow を使用するのが答えのようです:

http://jsfiddle.net/2QyY3/40/

 -webkit-box-shadow:0 0 0 5px black;

もちろん、これは safari 6 以前のようなブラウザーでのみ行います。