子要素bgカラークリップを親にborder-radius

Question

子要素を親のボーダー半径内にとどめるように確実にする方法は誰でも知っていますか？

はここに私が働いているのJSフィドルのサンプルです： http://jsfiddle.net/fuego/qCNRZ/

マークアップ：

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

私は単にコンテナは今青表示する

、親は丸みを帯びている。私は反映するためにフィドルを更新しました。

Answer 1

ただ必要なマージンは、あなたが純粋なCSSで望むものを達成する唯一の方法は、両方のdivためborder-radiusを追加することですhttp://jsfiddle.net/jalbertbowdenii/83Xrs/2/

Answer 2

を設定します。

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

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

デモ：http://jsfiddle.net/tZ8AL/1/

Answer 3

あなたの例に基づいて、それはあなたの#outer要素にoverflow:hiddenを追加するために十分であろう。

Answer 4

「overflow：hidden;」を追加する外側のdivにあなたの問題を解決します。乾杯。