Border radius cutting/overlapping image in Safari

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

Code:

---

.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 - Attachment 61644

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

Thanks.
Al.

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

Code:

---

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

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!

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:

Code:

---

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

---

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

Thanks for the replies guys.