Webkit: Image covers rounded border

Problem

When using a rounded border on an image, webkit browsers hide the border behind the image

CSS

img {
    border: 10px solid #000;
    border-radius: 100%;    
}

HTML

<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />


Bug reproduced @ http://jsfiddle.net/zPpVm/

This is probably related to this Webkit bug, but I cannot find a suitable work around.

Problem courtesy of: My Head Hurts

Solution

A possible workaround is to use a box-shadow:

box-shadow: 0 0 0 10px black;

Live Example

The main problem: It won't be calculated in the box-model

Solution courtesy of: Madara Uchiha

Discussion

As another workaround, you can wrap your image like this:

 <span class="img_container" >
    <img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
 </span>

Than style elements:

.img_container {
    border: 10px solid #000;
    border-radius: 100%; 
    display: inline-block;
    overflow: hidden;
}
.img_container img {
    display: block;
}

All modern browsers except Opera will render it correctly.

Discussion courtesy of: skobaljic

This recipe can be found in it's original form on Stack Over Flow.