css - 親divのimgのz-indexを修正する方法

Question

私は次のHTMLを持っています:

<div class="caller shadow-circle-lg"><img src="public/img/example-photo.png"></div>

そしてCSS：

.shadow-circle-lg {
    border-radius: 50%;
    -webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    -moz-box-shadow:    0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    box-shadow:         0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    border: 8px solid white;
}

div.caller {
        z-index: 200;
}

.caller > img {
    z-index: 100;
}

z-index が低いにもかかわらず、IMG 要素がまだ div 境界を越えてレンダリングされるのはなぜですか (はい、Chrome で DOM を確認しました)。

また、div ボーダー半径を強制的に画像をトリミングする方法はありますか?

IMG 自体にクラスを適用したくないことに注意してください。

ありがとう