[解決済み] border-radiusはコンテンツを切り取るべきですか？

質問

コンテナに border-radius ?

サンプルHTMLとCSSです。

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

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

見ての通り、私は border-radius をコンテナ上で使っている ( .progressbar ), が、コンテンツ ( .buffer ) はコンテナの「外」に出る . Google Chromeで見ています。

これは期待される動作なのでしょうか？

追伸：これは修正方法についてではなく、このように動作すべきかどうかについての話です。

どのように解決するのですか？

これは期待された動作なのでしょうか？

そうです、おかしな話ですが、実はそうなのです。その理由は次のとおりです。

デフォルトの overflow に対して <div> 要素 (および他のほとんどのもの) は visible であること、そして スペック にはこのように書かれています。 overflow: visible :

見える

この値は、コンテンツが切り取られていないこと、すなわち、ブロックボックスの外にレンダリングされる可能性があることを示す。

順番に §5.3 コーナークリッピング を Backgrounds and Borders モジュールの中で述べています。

ボックスの背景は、そのボーダー画像ではなく、適切な曲線にクリップされます (これは 'background-clip' によって決定されます)。 ボーダーまたはパディングのエッジにクリップする他の効果 (例えば 'visible' 以外の 'overflow') も曲線にクリップする必要があります。 置換された要素のコンテンツは、常にコンテンツエッジ曲線に切り取られる。また、ボーダーエッジの曲線の外側の領域は、要素に代わってマウスイベントを受け付けません。

強調した文章は、具体的には overflow 以外の値である必要があります。 visible (以外の値でなければならない（つまり auto , hidden , scroll など) を使って、コーナーがその子をクリップするようにします。

ボックスが可視オーバーフローを持つように定義されている場合、これはほとんどの視覚的要素のデフォルトであると述べたように、コンテンツはまったくクリップされないことになっています。そのため、角の四角い .buffer の丸みを帯びた角の上に .progressbar .

その結果、最も簡単な方法は .buffer の中でクリップすることです。 .progressbar の丸い角の中でクリップするには overflow: hidden のスタイルを .progressbar で示されるように この更新されたフィドル .