Search code examples
safarimobile-safaripaddingcss

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

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

Expected Outcome <-- Expected

Safari Rendering <-- 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?

Solution

  • 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.