Costringere il bambino a obbedire ai bordi curvi dei genitori nel CSS

Ho un div all'interno di un altro div. #outere #inner. #outerha bordi curvi e uno sfondo bianco. #innernon ha bordi curvi e uno sfondo verde. #innersi estende oltre i bordi curvi di #outer. C'è un modo per fermarlo?

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


    

Non importa come lo provo, si sovrappone ancora. Come posso #innerobbedire e riempire #outeri bordi?

modificare

L'hack seguente è servito allo scopo per ora. Ma la domanda rimane (forse per i CSS3 e gli autori di webbrowser): perché gli elementi figlio non obbediscono ai bordi curvi dei genitori e c'è comunque un modo per costringerli a farlo?

L'hack per aggirare questo per le mie esigenze per ora, puoi assegnare curve a singoli bordi. Quindi, per i miei scopi, ho appena assegnato una curva ai primi due dell'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;
}

Secondo le specifiche:

Gli sfondi di una casella, ma non la sua immagine di bordo, vengono ritagliati sulla curva appropriata (come determinato da "clip di sfondo"). Anche altri effetti che si agganciano al bordo o al bordo di riempimento (come 'overflow' diverso da 'visibile') devono essere agganciati alla curva. Il contenuto degli elementi sostituiti viene sempre tagliato alla curva del bordo del contenuto. Inoltre, l'area esterna alla curva del bordo del bordo non accetta eventi del mouse per conto dell'elemento.

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

Ciò significa che un overflow: hiddenon #outerdovrebbe funzionare. Tuttavia, questo non funzionerà per Firefox 3.6 e versioni precedenti. Questo è stato risolto in Firefox 4:

Gli angoli arrotondati ora ritagliano contenuto e immagini (se trabocca: visibile non è impostato).

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

Quindi avrai ancora bisogno della correzione, abbreviala in:

#outer {
  overflow: hidden;
}

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

Guardalo funzionare qui: http://jsfiddle.net/VaTAZ/3/

Cosa ci sarebbe di sbagliato in questo?

#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 vuoi bordi taglienti sul fondo: usa questi:

bordo-raggio-superiore-sinistro: 10px;
bordo in alto a destra raggio: 10px; 

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

hai provato a fare la posizione: relativa per il div interno ???

questo è:

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