Elementi figlio bg clip a colori ai genitori border-radius

Question

Qualcuno sa di un modo infallibile per forzare gli elementi figlio a rimanere nel raggio di confine dei loro genitori?

Ecco un esempio js violino con cui sto lavorando: http://jsfiddle.net/fuego/qCNRZ/

Markup:

<div id="outer"> 
    <div id="inner"> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
     Nah nah nah<br/> 
    </div> 
</div> 

CSS:

#outer { 
    width: 300px; 
    background: red; 
    border-radius:20px; 

} 

#inner { 
    background:blue; 
} 

Voglio semplicemente il contenitore di apparire blu ora, ma con i genitori con i bordi arrotondati. Ho aggiornato il violino per riflettere.

Answer 1

margini solo bisogno di impostare http://jsfiddle.net/jalbertbowdenii/83Xrs/2/

Answer 2

L'unico modo per ottenere ciò che si desidera con puro CSS è quello di aggiungere border-radius per entrambi div.

#outer { 
    width: 300px; 
    background: red; 
    border-radius:20px; 
    height:400px; 
} 

#inner { 
    background:blue; 
    border-radius:20px 20px 0 0; 
    padding-left:10px; 
} 

Demo:http://jsfiddle.net/tZ8AL/1/

Answer 3

Sulla base della vostra esempio basterebbe aggiungere overflow:hidden al vostro elemento #outer.

Answer 4

Aggiunta di "overflow: hidden;" al div esterno risolverà il tuo problema. Saluti.