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

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.