michaellindahl michaellindahl - 1 month ago 19
CSS Question

-webkit-border-radius acts differently from -moz-border-radius

My website is showing up differently on Safari vs Firefox. I would like to have the CSS make it look the same on Safari. I know that I could use two div boxes, one for the outline, one for the image, but I like how on Firefox I only need one and it curves the outline and the image. Is there anyway to have Safari curve the outline and the image?

Safari:

Safari border radius

Firefox:

Firefox border raidus

<img src="asset.jpg" class="example">


img.example {
width: 250px;
height: 250px;
background: rgba(0, 0, 0, .6);
padding: 18px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

Answer

This is a known bug in webkit browsers

See this example

So in short, yes, for now you have to wrap the image in a div. Sucks.

See these bug reports:

http://code.google.com/p/chromium/issues/detail?id=82417
https://bugs.webkit.org/show_bug.cgi?id=30475

For now, wrap it in a div, as I have done here

Comments