Forcer l'enfant à obéir aux bordures courbes du parent en CSS

J'ai un div à l'intérieur d'un autre div. #outeret #inner. #outera des bordures courbes et un fond blanc. #innern'a pas de bordures courbes et un fond vert. #inners'étend au-delà des frontières courbes de #outer. Y a-t-il un moyen d'arrêter cela?

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


    

Peu importe comment j'essaye, cela se chevauche toujours. Comment puis-je faire #innerobéir et remplir #outerles frontières de?

Éditer

Le hack suivant a servi le but pour le moment. Mais la question se pose (peut-être aux rédacteurs de CSS3 et du navigateur Web): pourquoi les éléments enfants n'obéissent-ils pas aux bordures courbes de leurs parents et y a-t-il de toute façon pour les forcer?

Le hack pour contourner cela pour mes besoins pour l'instant, vous pouvez attribuer des courbes à des bordures individuelles. Donc, pour mes besoins, je viens d'attribuer une courbe aux deux premiers de l'élément intérieur.

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

Selon les spécifications:

Les arrière-plans d'une boîte, mais pas sa bordure-image, sont coupés à la courbe appropriée (comme déterminé par 'background-clip'). Les autres effets qui se coupent sur la bordure ou le bord de remplissage (comme «débordement» autre que «visible») doivent également être coupés sur la courbe. Le contenu des éléments remplacés est toujours ajusté à la courbe du bord du contenu. En outre, la zone à l'extérieur de la courbe du bord de la bordure n'accepte pas les événements de souris au nom de l'élément.

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

Cela signifie qu'un overflow: hiddensur #outerdevrait fonctionner. Cependant, cela ne fonctionnera pas pour Firefox 3.6 et les versions antérieures. Ceci est corrigé dans Firefox 4:

Les coins arrondis coupent désormais le contenu et les images (si le dépassement: visible n'est pas défini).

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

Vous aurez donc toujours besoin du correctif, raccourcissez-le simplement à:

#outer {
  overflow: hidden;
}

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

Regardez-le fonctionner ici: http://jsfiddle.net/VaTAZ/3/

Quel serait le problème avec cela?

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

Si vous voulez des arêtes vives sur le fond: Utilisez ces éléments:

bord-haut-gauche-rayon: 10px;
border-top-right-radius: 10px; 

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

avez-vous essayé de faire la position: relative pour la div interne ???

C'est:

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