nicohvi nicohvi - 2 months ago 8
CSS Question

Chrome image border around rounded corners disappearing

So, this is the problem: http://bildr.no/view/927562

A closer look: http://bildr.no/view/927563



As you can see, the border for each corner turns invisible. This is the CSS code for the image:



#contentImage {
float: left;
border: 1px solid #C4C4C4;
border-radius: 8px;
margin-right: 25px;
}




<img src="images/image.jpg" id=contentImage" />


Any help would be greatly appreciated :-)

Answer

This is an unfortunate webkit bug. The only workaround that I know about is converting your img into a div and then putting the img as a background image:

#contentImage{
  background: url(http://placehold.it/100x100) top left no-repeat;
  width: 100px;
  height: 100px;
  border: 1px solid #000; 
  border-radius: 8px;
  margin-right: 25px;
}

http://jsfiddle.net/ybPKJ/

Comments