Border Radius / Overflow Problem in Chrome

I have a site that uses a lot of border-radius for layout. The issue is co开发者_如何学Pythonmpared to a working version (Firefox) in the screenshot below (also I did NOT design this awful thing).

All the code follows the same format for border radius:

border-top-left-radius: 25% 54%;
border-bottom-left-radius: 19% 54%;

The only thing I can see is the grey boxes ("main_area") border-radius is actually controlled by a parent, so maybe the grey background is overflowing.

Here is the link

Also note the same error occurs in Opera. I am not using prefixes, just the above css. The layout is also fine in IE9.

Thanks

Percentage dimensions are calculated based on the default font-size, so use a reset stylesheet or add browser specific font-sizes to the selectors which use percentages, such as:

div#container > #main > #main_area > .content > .holder {
  font-size: 10px;
}

/* Firefox reset */
@-moz-document url-prefix() {
    div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    }
}

/* IE9 reset */
@media all and (monochrome: 0) { 
   div#container > #main > #main_area > .content > .holder {
    font-size: inherit;
    } 
}