google-chrome - 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

Answer 2

border-radius親要素に与えられたものの半分の子要素を与えてみてください。

この回答から：https ：//stackoverflow.com/a/5421789/187954

Answer 3

Just add in

    .wrapper:first-child{
    border-radius:20px;
    }
    

You will have to adjust the radius though depending on your border thickness and take this off the child. I would also add in prefixes for the older supporting browsers -moz- etc..

Answer 4

Adding display: block; or display: inline-block; to the parent element could solve it.