Chrome not honoring border radius on children

Question

I'm having a bit of trouble getting Chrome to honor the border radius on child elements.

Here's the setup:

<div class='wrapper'>
    <img id='sosumi' src='http://images.apple.com/safari/images/overview_hero.jpg' />
</div>

if the wrapper is a positioned element (e.g. position: relative) and has a border-radius, then the border radius will not be applied to the img content.

it doesn't have to be an image, either. any content that fills the background.

Here's a reduced example page that shows off the problem. View in Safari, Mobile Safari, Firefox, or IE and the corners of the image will be clipped to the round corner. Viewed in Chrome the image overflows the corner (despite the overflow:hidden css) and looks ugly.

Have a look: https://dl.dropbox.com/u/433436/no-rounding/index.html

The question: Is there some workaround for this that's not too insane? Does anyone know why this affects one WebKit based browser and not others? Perhaps this is coming to update in Chrome soon?

Answer 1

You need to remove the position: relative

If your really need position relative then you can double wrap your element:

HTML:

<div class="outer">
    <div class="wrapper">
        <div class="inside">
        </div>
    </div>
</div>

CSS:

.outer {
    position: relative;
}
.wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border: 3px solid red;
    border-radius: 20px;
}
.inside {
    width: 100px;
    height: 100px;
    background-color: #333;
}

http://jsfiddle.net/eprRj/

See these related questions:

• Forcing child to obey parent's curved borders in CSS
• CSS Border radius not trimming image on Webkit
• How to make CSS3 rounded corners hide overflow in Chrome/Opera