Zwingen des Kindes, den gekrümmten Rändern der Eltern in CSS zu gehorchen

Ich habe ein Div in einem anderen Div. #outerund #inner. #outerhat gekrümmte Ränder und einen weißen Hintergrund. #innerhat keine gekrümmten Ränder und einen grünen Hintergrund. #innererstreckt sich über die gekrümmten Grenzen von #outer. Gibt es überhaupt etwas zu stoppen?

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


    

Egal wie ich es versuche, es überschneidet sich immer noch. Wie kann ich #innergehorchen und die #outerGrenzen füllen ?

bearbeiten

Der folgende Hack hat vorerst den Zweck erfüllt. Aber die Frage bleibt (vielleicht für die CSS3- und Webbrowser-Autoren): Warum gehorchen untergeordnete Elemente nicht den gekrümmten Rändern ihrer Eltern und gibt es sie überhaupt, um sie dazu zu zwingen?

Um dies für meine Bedürfnisse zu umgehen, können Sie einzelnen Rändern Kurven zuweisen. Für meine Zwecke habe ich den beiden oberen Teilen des inneren Elements eine Kurve zugewiesen.

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

Nach den Angaben:

Die Hintergründe einer Box, aber nicht das Rahmenbild, werden auf die entsprechende Kurve zugeschnitten (wie durch 'Hintergrund-Clip' bestimmt). Andere Effekte, die am Rand oder an der Auffüllkante befestigt werden (z. B. "Überlauf" außer "sichtbar"), müssen ebenfalls an der Kurve befestigt werden. Der Inhalt der ersetzten Elemente wird immer auf die Inhaltskantenkurve zugeschnitten. Außerdem akzeptiert der Bereich außerhalb der Kurve der Randkante keine Mausereignisse für das Element.

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

Dies bedeutet, dass ein overflow: hiddenOn #outerfunktionieren sollte. Dies funktioniert jedoch nicht für Firefox 3.6 und niedriger. Dies ist in Firefox 4 behoben:

Abgerundete Ecken schneiden jetzt Inhalt und Bilder ab (wenn Überlauf: sichtbar nicht eingestellt ist).

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

Sie benötigen also immer noch das Update. Kürzen Sie es einfach auf:

#outer {
  overflow: hidden;
}

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

Sehen Sie, wie es hier funktioniert: http://jsfiddle.net/VaTAZ/3/

Was wäre daran falsch?

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

Wenn Sie scharfe Kanten am Boden wünschen: Verwenden Sie diese:

Rand-oben-links-Radius: 10px;
Rand-oben-rechts-Radius: 10px; 

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

hast du versucht die position zu machen: relativ für die innere div ???

das ist:

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