Forcing child to obey parent's curved borders in CSS

I have a div inside of another div. #outer and #inner. #outer has curved borders and a white background. #inner has no curved borders and a green background. #inner extends beyond the curved borders of #outer. Is there 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 to #outer's borders?

edit

The following hack served the purpose for now. But the question stands (maybe to the CSS3 and webbrowser writers): Why don't child elements obey their parent's curved borders and is there anyway to force them to?

The hack to get around this for my needs for now, you can assign curves to individual borders. So for my purposes, I just assigned a curve to the top two of the inner element.

#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;
}

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/

What would be wrong with this?

#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; 
}

If you want sharp edges on the bottom: Use these :

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

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

have you tried making the position:relative for the inner div ???

that is:

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

You can simply use

border-radius: inherit;

to follow the parent

.parent {
 width: 100px;
 height:100px;
 border:1px solid green;
 border-radius: 16px 16px 0 0;
 padding: 10px;
}
.child {
  width:100px;
  height: 100px;
  border: 1px solid red;
  background: blue;
  border-radius: inherit;
}

<div class="parent">
  <div class="child">

</div>
</div>