0

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.

Community
  • 1
  • 1
My Head Hurts
  • 37,315
  • 16
  • 75
  • 117

2 Answers2

1

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

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

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.

skobaljic
  • 9,379
  • 1
  • 25
  • 51