Obligar al niño a obedecer los bordes curvos de los padres en CSS

Tengo un div dentro de otro div. #outery #inner. #outerTiene bordes curvos y un fondo blanco. #innerno tiene bordes curvos y un fondo verde. #innerse extiende más allá de los bordes curvos de #outer. ¿Hay alguna manera de parar esto?

#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 importa cómo lo intente, todavía se superpone. ¿Cómo puedo hacer #innerobedecer y llenar #outerlas fronteras?

editar

El siguiente truco sirvió para el propósito por ahora. Pero la pregunta sigue (tal vez para los escritores CSS3 y webbrowser): ¿por qué los elementos secundarios no obedecen los bordes curvos de sus padres y hay alguna forma de obligarlos a hacerlo?

El truco para solucionar esto para mis necesidades por ahora, puede asignar curvas a bordes individuales. Entonces, para mis propósitos, acabo de asignar una curva a los dos primeros del elemento interno.

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

De acuerdo con las especificaciones:

Los fondos de un cuadro, pero no su imagen de borde, se recortan a la curva apropiada (según lo determinado por 'clip de fondo'). Otros efectos que se recortan en el borde o el borde del relleno (como 'desbordamiento' que no sea 'visible') también deben recortarse en la curva. El contenido de los elementos reemplazados siempre se recorta a la curva de borde de contenido. Además, el área fuera de la curva del borde del borde no acepta eventos del mouse en nombre del elemento.

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

Esto significa que un overflow: hiddenencendido #outerdebería funcionar. Sin embargo, esto no funcionará para Firefox 3.6 y versiones inferiores. Esto se soluciona en Firefox 4:

Las esquinas redondeadas ahora recortan el contenido y las imágenes (si el desbordamiento: visible no está configurado).

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

Así que aún necesitará la solución, solo acorte a:

#outer {
  overflow: hidden;
}

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

Véalo trabajando aquí: http://jsfiddle.net/VaTAZ/3/

¿Qué estaría mal con esto?

#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 desea bordes afilados en la parte inferior: use estos:

radio de borde superior izquierdo: 10px;
radio de borde superior derecho: 10px; 

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

¿Has intentado hacer la posición: relativa para el div interno?

es decir:

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