Border-radius funktioniert nicht auf safari

Also habe ich diesen Kreis mit dem Daumen und einem weißen Rahmen. Alles funktioniert in allen browser ausser safari, der nicht wiedergegeben wird, dass der weiße Rand, wie es sollte. Wie kann ich diese arbeiten dann?

Beispiel http://jsfiddle.net/vTBeC/2/

Danke an alle 😉

HTML-Markup

<div class="author-thumb"><img class="circle-thumb" src="http://s11.postimg.org/gst5lw9pb/testimonial_1.jpg" alt="" width="80" height="80" /> </div>

CSS-Markup

.author-thumb {
    float: none;
    position: absolute;
    left: 50%;
    top: -42px;
    margin-left: -37px;
    margin-top: 100px;
    z-index: 1;
}
.author-thumb:after, .author-thumb:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.author-thumb:after {
    border-color: rgba(250, 250, 250, 0);
    border-top-color: #fafafa;
    border-width: 7px;
    left: 50%;
    margin-left: -7px;
}
.author-thumb:before {
    border-color: rgba(222, 222, 222, 0);
    border-top-color: #dedede;
    border-width: 8px;
    left: 50%;
    margin-left: -8px;
}
.circle-thumb {
    width: 75px;
    height: 75px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

InformationsquelleAutor Nesta | 2013-09-28