webkit - Webkit: 画像が丸みを帯びた境界線を覆っている

Question

画像に丸い境界線を使用すると、Webkit ブラウザが画像の後ろに境界線を隠します

CSS

img {
    border: 10px solid #000;
    border-radius: 100%;    
}

HTML

<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />

再現されたバグ @ http://jsfiddle.net/zPpVm/

これはおそらくこの Webkit バグに関連していますが、適切な回避策が見つかりません。

Answer 1

box-shadow考えられる回避策は、 ：を使用することです。

box-shadow: 0 0 0 10px black;

実例

主な問題：ボックスモデルでは計算されません

Answer 2

別の回避策として、次のように画像をラップできます。

 <span class="img_container" >
    <img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
 </span>

スタイル要素より:

.img_container {
    border: 10px solid #000;
    border-radius: 100%; 
    display: inline-block;
    overflow: hidden;
}
.img_container img {
    display: block;
}

Opera を除く最新のブラウザはすべて正しく表示されます。