border-radiusとborderを組み合わせたときの挙動

画像を丸く切り取って周辺をborderで囲いたいんですけど，これSafariのバグなのか仕様でさだまってないのかどっちですかね．

html

<p>
  <img src="/img/me.jpg" class="img-circle img-responsive">
</p>

css

p {
    width: 150px;
    margin: 100px auto 0 auto;
    text-align: center;
}
.img-circle{
    width: 100%;
    border: 3px #ccc solid;
    border-radius: 500px;
}

Firefox

Chrome

Safari