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

Question

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 Oper

Answer 1

based on graycrow's excellent answer...

Here's a more real world example that has two cicular divs with some filler content. I replaced the hard-coded png background with just a hex value, i.e.

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

is replaced with

-webkit-mask-image:#fff;

See this JSFiddle... http://jsfiddle.net/hqLkA/