CSS border-radius + box-shadow in Safari

Question

I made a CSS class to display images rouded with border and some shadows. In Chrome, Firefox all OK, but Safari displays it wrong.

Code used may be found in this fiddle or below:

img {
    width: 200px;
    height: 200px;
    border: 5px solid #DDD;
    border-radius: 100px;
    box-shadow: 0 7px 10px #CCC;
}

How to make it work in Safari?

Screenshots (first is Chrome, Second is Safari):

Answer 1

I modified your fiddle here: http://jsfiddle.net/Y2ZGR/3/

HTML:

<div class="image-holder">
    <img src="http://data1.whicdn.com/images/33153622/original.jpg" />
</div>

CSS:

img, .image-holder {
    width: 200px;
    height: 200px;
}

img {
    border-radius: 100px;
      -webkit-border-radius: 100px; 
      -moz-border-radius: 100px;
    -khtml-border-radius: 100px;
}

.image-holder {
    border: 5px solid #DDD;

    border-radius: 110px;
      -webkit-border-radius: 110px; 
      -moz-border-radius: 110px;
    -khtml-border-radius: 110px;

    box-shadow: 0 7px 10px #CCC;
     -moz-box-shadow: 0 7px 10px #CCC;
     -webkit-box-shadow: 0 7px 10px #CCC;

    background-color: rgb(204,204,204); /* Needed for IEs */
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;
}

Answer 2

Cross browser border-radius

     /* Safari 3-4, iOS 1-3.2, Android 1.6- */
     -webkit-border-radius: 100px; 

     /* Firefox 1-3.6 */
     -moz-border-radius: 100px; 

     /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
     border-radius: 100px; 

Cross browser box-shadow

    background-color: rgb(204,204,204); /* Needed for IEs */

    -moz-box-shadow: 0 7px 10px #CCC;
    -webkit-box-shadow: 0 7px 10px #CCC;
    box-shadow: 0 7px 10px #CCC;

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
    zoom: 1;

Final result for your changed css (include filter if you want it for IE as well)

img {
    width: 200px;
    height: 200px;
    border: 5px solid #DDD;
    border-radius: 100px;
      -webkit-border-radius: 100px; 
      -moz-border-radius: 100px;
    box-shadow: 0 7px 10px #CCC;
     -moz-box-shadow: 0 7px 10px #CCC;
     -webkit-box-shadow: 0 7px 10px #CCC;
}

Answer 3

img {
border-radius: 100px;
  -webkit-border-radius: 100px; 
  -moz-border-radius: 100px;
-khtml-border-radius: 100px;

}