無知を晒す

ふだんの出来事はこっちに書いてます: http://tana.hatenablog.com

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

f:id:side_tana:20130809142308p:plain

Chrome

f:id:side_tana:20130809142337p:plain

Safari

f:id:side_tana:20130809142418p:plain