How to make CSS3 rounded corners hide overflow in Chrome/Opera

css, html, rounded-corners

Solution

Nevermind everyone, I managed to solve the problem by adding an additional div between the wrapper and box.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Thanks everyone who helped!

→ http://jsfiddle.net/5fwjp/

Problem

I need round corners on a parent div to mask content from its childen. `overflow: hidden` works in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned relatively or absolutely. This works in Firefox and IE9: CSS ``` #wrapper { width: 300px; height: 300px; border-radius: 100px; overflow: hidden; position: absolute; } #box { width: 300px; height: 300px; background-color: #cde; } ``` HTML ``` <div id="wrapper"> <div id="box"></div> </div> ``` Example on JSFiddle Thanks for the help! UPDATE: The bug causing this issue has been since fixed in Chrome. I have not re-tested Opera or Safari however.

Original source