Border radius cutting/image overlapping in Safari - safari

Question

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.
It's probably something simple, but I'm still stuck on this.
Thanks.
Al.

Answer 1

Answer from Sitepoint:
Hm, tricky. It works if you put the border on the 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.