Forcing a child to obey parental curved borders in CSS

Question

I have a div inside another div. #outer and #inner . #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner goes beyond the curved borders of #outer . Anyway, to stop this?

 #outer { display: block; float: right; margin: 0; width: 200px; background-color: white; overflow: hidden; -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } #inner { background-color: #209400; height: 10px; border-top: none; } 

  <div id="outer"> <div id="inner"></div> <!-- other stuff needs a white background --> <!-- bottom corners needs a white background --> </div> 

No matter how I try, it still overlaps. How can I make #inner obey and fill the borders of #outer ?

change

The next hacked this target. But the question is (maybe for CSS3 and webbrowser authors): Why do children not obey their parent curved borders and is there anyway to force them?

Hacking to get around this for my needs now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the two upper inner elements.

 #inner { border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; } 

Answer 1

According to specifications:

Frames, but not a border-image, are bound to the corresponding curve (as defined by the "Background clip). Other effects that clip to the border or edge (for example," overflow other than "Visible") should also be bound to the curve. Content replaced items are always cropped to the edge of the content curve. In addition, an area outside the edge curve does not accept mouse events on behalf of the element.

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

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

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

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

So, you still need a fix, just shorten it to:

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

See how it works: http://jsfiddle.net/VaTAZ/3/

Answer 2

If you need sharp edges below: Use them:

 border-top-left-radius: 10px;
 border-top-right-radius: 10px; 

 -moz-border-radius-topleft
 -moz-border-radius-topright

Answer 3

What would be wrong with that?

 #outer { display: block; float: right; margin: 0; width: 200px; background-color: white; overflow: hidden; } #inner { background-color: #209400; height: 10px; border-top: none; } #outer, #inner{ -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } 

Answer 4

Have you tried making a position: relative to the inner div ???

i.e:

 #inner { background-color: #209400; height: 10px; border-top: none; position: relative; left: 15px; top: 15px; }