Border radius cutting/overlapping image in Safari

[allanlud]

I have looked through a few other questions and answers but still can't get this working in Safari (v 5.1.7).

Here is my code - jsfiddle

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}
.services img   {
    border: solid 8px #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.services a img:hover   {
    border: solid 8px #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

The image is square 218px x 218px, so I'm guessin that has something to do with it, but I wanted it like that so it would look decent enough in older browsers that don't support border radius.

Here is what it looks like in Safari - border-cutting.jpg

It's probably something simple, but I'm still stuck on this.

Thanks.
Al.

[ralph.m]

Hm, tricky. It works if you put the border on the <a> instead:

.services   {
    width: 218px;
    float: left;
    margin-right: 29px;
}

.services img   {
    vertical-align: top;
}

.services img, .services a   {
    border-radius: 50%;
}

.services a {
	border: 8px solid #ccc;
	display: inline-block;
}
	
.services a:hover   {
	border: 8px solid #333;
    -o-transition: all 1s ease 0s;
    -ms-transition: all 1s ease 0s;
    -moz-transition: all 1s ease 0s;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
}

You can just use border-radius now, without the vendor prefixes, as all browsers that are going to support it now.

[allanlud]

Thanks for that ralph. I have edited my code, but am on a PC running XP and Safari v 3.1 (which shows up as square), so won't be able to check myself til I go home (another 4 hours).

Thanks again ralph!

[Force Flow]

It's a known webkit bug when you use border-radius on an image. The only fix I've seen available to address it is this:

img { 
-webkit-box-shadow: 0px 0px 0px 1px #000000; /* fix for border-radius on img not clipping corners in chrome/safari */ 
}

[allanlud]

Thanks for that Force. I used ralph's method and it works great.

Thanks for the replies guys.