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?

score 6 · Accepted Answer · edited May 23 '17 at 11:46

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:

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Try giving the child elements a border-radius of half of that given to the parent element.

From this answer: https://stackoverflow.com/a/5421789/187954

edited May 23 '17 at 12:32

Community

1
1

answered Sep 20 '12 at 04:07

Michael Robinson

29,278
12
104
130

2

While that obviously solves the problem in the simple case for complicated use cases it's not really feasible. In my specific case the child element is not something is user-content that I can't modify. – isaiah Sep 20 '12 at 04:16

score 0 · Answer 3 · answered Sep 21 '12 at 14:00

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..

score 0 · Answer 4 · answered Apr 13 '16 at 15:13

0

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

answered Apr 13 '16 at 15:13

Kimberly Lin

1

Chrome not honoring border radius on children

4 Answers4