Add border to circle image

border, css

Solution

See this JsFiddle

http://jsfiddle.net/z3rLa/1/

.avatar {
    width:128px;
    margin: 10px;
    border:10px solid red;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}

Problem

I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this? ``` .face { display: block; margin: auto; border-radius: 100%; border: 5px solid #ff675b;} ``` Here is a screenshot of the issue: https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

Original source