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 - border-cutting.jpg

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

Thanks.
Al.