Forçando o filho a obedecer as bordas curvas dos pais em CSS

Eu tenho uma div dentro de outra div. #outere #inner. #outerpossui bordas curvas e fundo branco. #innernão possui bordas curvas e fundo verde. #innerse estende além das bordas curvas de #outer. Há alguma maneira para parar isso?

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


    

Não importa como eu tente, ainda se sobrepõe. Como faço para #innerobedecer e preencher #outeras bordas?

editar

O hack a seguir serviu ao propósito por enquanto. Mas a pergunta permanece (talvez para os escritores do CSS3 e do navegador da web): Por que os elementos filhos não obedecem às bordas curvas de seus pais e existe alguma maneira de forçá-los a fazê-lo?

O truque para contornar isso para minhas necessidades por enquanto, você pode atribuir curvas a bordas individuais. Portanto, para meus propósitos, acabei de atribuir uma curva às duas primeiras do 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 acordo com as especificações:

Os fundos de uma caixa, mas não a imagem da borda, são cortados na curva apropriada (conforme determinado por 'clipe de fundo'). Outros efeitos que são cortados na borda ou na borda do preenchimento (como 'estouro' que não seja 'visível') também devem ser cortados na curva. O conteúdo dos elementos substituídos é sempre aparado na curva da borda do conteúdo. Além disso, a área fora da curva da borda da borda não aceita eventos de mouse em nome do elemento.

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

Isso significa que um overflow: hiddenon #outerdeve funcionar. No entanto, isso não funcionará no Firefox 3.6 e abaixo. Isso foi corrigido no Firefox 4:

Os cantos arredondados agora recortam o conteúdo e as imagens (se o excesso: visível não estiver definido).

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

Então você ainda precisará da correção, apenas reduza-a para:

#outer {
  overflow: hidden;
}

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

Veja trabalhando aqui: http://jsfiddle.net/VaTAZ/3/

O que haveria de errado com isso?

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

Se você deseja bordas afiadas na parte inferior: Use estas:

raio da borda superior esquerda: 10 px;
raio na borda superior direita: 10 px; 

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

você já tentou fazer a posição: relativa para a div interna ???

isso é:

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