Search code examples
google-chromewebkitcss

Chrome not honoring border radius on children

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?

Solution

  • 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: