webkit - border-radiusを使用したimgは、その境界線をオーバーレイします

Question

Webkitで、境界線のある画像に境界線の半径を設定すると、画像は境界線内にうまく収まらず、境界線をオーバーレイして正方形のままになります。

http://jsfiddle.net/ECNJ4/

代わりに背景画像を使用したり、マークアップを追加したりすることを意味しない修正はありますか？

Answer 1

チェックアウト： http： //jsfiddle.net/ECNJ4/6/

CSS

img {
  border-radius: 15px;
  box-shadow: 0 0 0 16px red;
}

</ p>

Answer 2

それを機能させるには、imgの周りにラッパー要素を使用する必要がありました。より良い解決策があるかもしれませんが、私はそれを見つけられませんでした。