CSSで子供に親の湾曲した境界線を強制する

別のdivの中にdivがあります。 #outerと#inner。 #outer湾曲した境界線と白い背景があります。 #inner湾曲した境界線はなく、背景は緑色です。 #innerの湾曲した境界線を超えて拡張します#outer。とにかくこれを止める方法はありますか？

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


    

どのように試しても、それでも重複します。どうすればの境界に#inner準拠し、満たすことができ#outerますか？

編集する

次のハックは今のところ目的を果たしました。しかし、問題は（おそらくCSS3とWebブラウザーの作成者に）あります。なぜ子要素が親の湾曲した境界線に準拠せず、強制する必要があるのでしょうか。

今のところ私の必要性のためにこれを回避するためのハック、個々の境界に曲線を割り当てることができます。そのため、目的のために、内側の要素の上位2つに曲線を割り当てました。

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

仕様によると：

ボックスの背景は、border-imageではなく、適切な曲線（ 'background-clip'によって決定される）にクリップされます。境界またはパディングエッジにクリップする他のエフェクト（「可視」以外の「オーバーフロー」など）も、曲線にクリップする必要があります。置換された要素のコンテンツは常にコンテンツエッジカーブにトリミングされます。また、境界エッジの曲線の外側の領域は、要素に代わってマウスイベントを受け入れません。

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

これは、overflow: hiddenオン#outerが機能することを意味します。ただし、これはFirefox 3.6以下では機能しません。これはFirefox 4で修正されています。

角の丸い部分がコンテンツと画像をクリップするようになりました（オーバーフローの場合：表示が設定されていません）。

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

したがって、まだ修正が必要です。次のように短くしてください。

#outer {
  overflow: hidden;
}

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

ここで動作することを確認してください：http : //jsfiddle.net/VaTAZ/3/

これで何が悪いのでしょうか？

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

底に鋭いエッジが必要な場合：これらを使用してください：

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

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

あなたはposition：relativeを内部divに対して相対的に作成しようとしましたか???

あれは：

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