css3 border-radius not working for child element

Question

I'm trying to develop slide box which have border radius in parent div. It works fine with Firefox but got problem in safari and chrome.

The problem is that child element overlaps rounded border of parent div.

You can see the example at http://jsfiddle.net/7KgEh/6/. Have a look in safari, chrome and firefox; you'll see difference in the right side the child div is overlapping rounded border of parent div.

I searched internet but most of post pointed it as webkit bug. Anybody knows the solution?

Answer 1

Simply add overflow: hidden; to the container element with the rounded borders.