CODEWITHSUNDEEP
webkitbordercss
My Head Hurts
My Head Hurts

Reputation: 37685

Webkit: Image covers rounded border

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.

Upvotes: 0

Views: 184

Answers (2)

skobaljic
skobaljic

Reputation: 9644

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.

Upvotes: 0

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175098

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

Upvotes: 1

Related Questions