Rounded corners fail to cut off content in webkit browsers if position:relative

Question

Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if position:relative;

See this demo.

HTML:

<div class="outer">
    <div class="inner">
    </div>
<div>

CSS:

.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
}

Anyone know of a fix? Thanks-

Answer 1

http://jsfiddle.net/USd5s/

Hate to add extra dom elements but a simple wrapper fixes this right up. You don't have to use my choice of element or css method either, span and qualified css is just my taste. or something would work just as well.

Answer 2

You can force it to render in 3d with:

-webkit-transform: translateZ(0);   
-moz-transform: translateZ(0);   
transform: translateZ(0);    

Answer 3

Simply set the inner to the same border radius as the outer.

.inner {
    -moz-border-radius: inherit;
    -webkit-border-radius: inherit;
    border-radius: inherit;
}

Oh, and don't forget the webkit peoples. :]

Answer 4

I had the same issue in a project and solve it with a little change in the CSS

instead of setting position to relative I set it to inherit:

.outer {
    background:yellow;
    border: solid 1px black;
    position: inherit;
    overflow:hidden;
    border-radius: 12px;   
}

And that solved perfectly the problem.

Answer 5

I believe that I read somewhere that you have to clip the container to something in order to solve this problem. I'm not really sure, but I think that's the way to go.

Answer 6

As Paul Said, Bug in webkit, But you can still get around it using margins on inner div.

Answer 7

You can give the inner div the same border-radius: http://jsfiddle.net/eCsA3/8/

<div class="outer">
    <div class="inner">
    </div>
<div>

<style type="text/css">
.outer {
    background:yellow;
    border:solid 1px black;
    position:relative;/* Setting this means rounded corners don't cut off content! */
    overflow:hidden;

    -moz-border-radius: 12px;
    border-radius: 12px;   
}
.inner {
    background:red;
    height:50px;
    -moz-border-radius: 12px;
    border-radius: 12px;   
}
</style>

Answer 8

Please see this link. This solves your problem.

#wrapper {
    margin-top:250px;
    width: 300px; 
    height: 300px;
    border-radius: 100px;
    overflow: hidden;
    position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
}

Answer 9

Try this as the CSS for .inner:

.inner {
    background: red;
    height: 50px;
    position: absolute;
    top: 1px;
    left: 12px;
    right: 12px;
    bottom: 1px;
}

You will need to tweak bottom and top to get the height right. If left unchanged, the class will only have a height of one pixel. This method will set the left and right margins to the border radius, so nothing appears on the edges.

Alternatively, if you have a solid color background around .outer you could make an image like this:

where the area inside (the checkered area in the image) is transparent and the area outside is the background color. Then use border image or absolute positioning to place it where the corners are. Give it a high z-index. When you scroll, the contents will be hidden underneath the filled part of the corner.