Are Safari & Mobile Safari rendering rounded borders with radius and padding incorrectly?

Question

Safari and Mobile Safari seem to have a problem when you combine border radius, padding and borders. Works fine in Chrome and Firefox.

<-- Expected

<-- Safari Rendering

HTML:

<img src="http://lorempixel.com/200/200/animals/3/" />

CSS:

img {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 500px;
    -moz-border-radius:    500px;
    border-radius:         500px;
    padding: 3px;
    border: 1px solid #999;
    margin: 10px
}

Example: http://jsfiddle.net/ucNwx/2/

Is it my fault or Safaris? How would I fix it?

Answer 1

My bet it's Safari bug: border-radius is applied late and produces clipping effect. Fortunately, box-shadow is rendered correctly, so let's use it:

border-radius: 50%;
box-shadow:
  0 0 0 3px white,
  0 0 0 4px #999;

Works on Safari 6 on iPad and OS X.

Answer 2

Best solution I can think of right now: http://jsfiddle.net/ucNwx/5/

Uses a wrapper div to draw the border and then places the image inside of it. Still got some artifacts on the right edge but I guess that's a Safari bug.

HTML

<div class="border-container">
    <img src="http://lorempixel.com/200/200/animals/3/" />
</div>

CSS

.border-container {
    width: 206px;
    height: 206px;
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    border: 1px solid #999;
    margin: 10px
}

img {
    -webkit-border-radius: 50%;
    -moz-border-radius:    50%;
    border-radius:         50%;
    width: 200px;
    height: 200px;
    margin: 3px;
}