WebKit border radius

HTML & CSS
1

I’ve noticed that WebKit browsers (only tested Chrome) render borders with round corners differently than in Firefox.

Say you have an image and you give it a 1px solid white border and then set border radius to 5px. Firefox gives you a nice solid 1px wide white line around the image, with round corners. In chrome, however, the white border gets cut off in the corners, and looks awful.

Is there a work around for this?

2

Put the image in a floated div and apply the border-radius to both.

e.g.


div{
	border-radius:15px;
	-webkit-background-clip: padding-box;
	float:left;
	border:1px solid #000;
}
img{
	border-radius:15px;
	-webkit-background-clip: padding-box;
	float:left;
}

That works pretty well.

3

You can put the image on a div as a background image. And apply the border radius to the div.

4

This may or may not fix your problem, but I’ve had several cases where border-radius looked horrible on webkit and this did the trick.

-webkit-background-clip: padding-box;

no guarantee, but worth a shot.

Though overall, the behavior of images and backgrounds in regard to border-radius on most browsers is disastrously bad. You can’t apply it to image at all, it has problems with background-images bleeding past the border radius in webkit…