border-radiusでコンテンツをクリップする必要がありますか？

Question

容器にborder-radiusが入っている場合、私の容器の内容を切ってはいけませんか？

サンプルHTMLとCSS：

<div class="progressbar"> 
    <div class="buffer"></div> 
</div> 

.progressbar { height: 5px; width: 100px; border-radius: 5px; } 
.buffer { width: 25px; height: 5px; background: #999999; } 

私はbut the content (.buffer) goes 'outside' the container、コンテナ（.progressbar）にborder-radiusを使用見ることができるように。私はこれをGoogle Chromeで見ています。

これは予期された動作ですか？

P.S.これは修正する方法ではなく、これがこのように機能するかどうかについてです。

Answer 1

が、これは正常な動作ですか？

はい、聞こえるほどクレイジーですが、実際はそうです。

デフォルト<div>要素（および他のほとんどのもの）visibleあるためoverflow、およびspecこれについてoverflow: visible言う：なぜここにあります

見える
この値はコンテンツがクリップされていないことを示し、すなわち、ブロックボックスの外側にレンダリングすることができます。ターンで

、背景にある§5.3 Corner clippingと国境モジュールは言う：ボックスの背景が

はなく、そのボーダー-画像、「バックグラウンド・クリップ」によって決定される（適切な曲線にクリップされています）。 ボーダーやパディングエッジにクリップする他のエフェクト（ 'visible'以外の 'overflow'など）も、カーブにクリップする必要があります。置き換えられた要素のコンテンツは、常にコンテンツエッジカーブにトリムされます。また、境界線のカーブの外側の領域は、要素に代わってマウスイベントを受け付けません。

私が特に強調してきた文は、ボックスのoverflow値がその子をクリップするコーナーためにvisible以外のもの（つまりauto、hidden、scrollなどを意味する）でなければならないことを言及しています。

ボックスが目に見えるオーバーフローを持つように定義されている場合、ほとんどのビジュアル要素のデフォルトがそうであるように、コンテンツはまったくクリップされていません。そのため、正方形の角が.bufferの場合は、角の丸みが.progressbarになります。

this updated fiddleに示すようにその結果、.bufferは.progressbar「S内丸い角をクリップを取得する最も簡単な方法は、.progressbarにoverflow: hiddenスタイルを追加することです。

Answer 2

この質問は同じ欠陥を指しているようですが、明らかにこれはバグです。

CSS3 border-radius clipping issues

編集

イーク！ BoltClockは、これはindendedされているので、私はトピックについてこの他のSOの質問を投稿しますが、私はまた、これについての仕様引用を探していることに言及している。 How do I prevent an image from overflowing a rounded corner box with CSS3?

仕様リンク

ただ、参考のために、私はに関連したリンクを貼ります - 私はあなたが与えてくれた例を明示的に何かを見つけることができません。

CSS Backgrounds - Rounded Corners

Answer 3

これは仕様が言うことであるので、これはそれが動作するはずの方法です。しかし、それはChromeがそういうことを意味するわけではありません。

5.3。コーナークリッピング

ボックスの背景は境界線画像ではなく、適切な曲線にクリップされます（ 'background-clip'によって決定されます）。ボーダーやパディングエッジにクリップするその他のエフェクト（「オーバーフロー」など）も、カーブにクリップする必要があります。置き換えられた要素の内容は、常にコンテンツエッジカーブにトリムされます。また、境界線のカーブの外側の領域は、要素に代わってマウスイベントを受け付けません。修正がどうなるか疑問に誰のために

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

Answer 4

。最も簡単な方法は、CSSを編集することです。これは、適切な修正だろう与えられた例では

：

.progressbar { height: 5px; width: 100px; border-radius: 5px; overflow: hidden; } 

Answer 5

は意味的に言えば、それは単に国境半径を追加するのが最善です新しいクラスの追加、したがって、内側のdiv要素にプロパティを継承します。結果として

.buffer { 
    border-radius: inherit; 
} 

、他の状況のた​​め、あなたはの使用を維持することができますoverflow：autoがコンテンツをオーバーフローさせ、すべてを見たい場合はautoを指定します。