Forcing child to obey parent's curved borders in CSS

According to the specs:

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

http://www.w3.org/TR/css3-background/#the-border-radius

This means that an overflow: hidden on #outer should work. However, this won't work for Firefox 3.6 and below. This is fixed in Firefox 4:

Rounded corners now clip content and images (if overflow: visible is not set).

https://developer.mozilla.org/en/CSS/-moz-border-radius

So you'll still need the fix, just shorten it to:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

See it working here: http://jsfiddle.net/VaTAZ/3/