css - chrome BORDERがborder RADIUSで丸められない

Question

私はイメージを持っています

<img class="user-img" src="user_img/usr.jpg" alt="username" />

100px の半径を追加して円を作成します。

.user-img {
  width: 170px;
  height: 170px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -khtml-border-radius: 100px ;
  border-radius: 100px;
  -moz-box-shadow: 0px 10px 10px 0px #999999; /* Firefox */
  -webkit-box-shadow: 0px 10px 10px 0px #999999; /* Safari, Chrome */
  box-shadow: 0px 10px 10px 0px #999999; /* CSS3 */
}

これは正常に機能しますが、追加します

  border: solid 7px white;

これは FF では機能しますが、Chrome では境界線は丸みを帯びた画像の半径に従いません。

ここにデモがありますhttp://jsfiddle.net/afro360/zcQ3G/2/

提案は誰ですか？

ありがとう