title: Should border-radius clip the content?
body: <p>Shouldn't the content of my container be cut off when the container has <code>border-radius</code>?</p>
  <h2>Sample HTML and CSS:</h2>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.progressbar { height: 5px; width: 100px; border-radius: 5px; }
  .buffer { width: 25px; height: 5px; background: #999999; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="progressbar"&gt;
      &lt;div class="buffer"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see I use <code>border-radius</code> on the container (<code>.progressbar</code>), <a href="http://jsfiddle.net/u6xkd/" rel="noreferrer">but the content (<code>.buffer</code>) goes 'outside' the container</a>. I'm seeing this on Google Chrome.</p>
  <p>Is this the expected behavior?</p>
  <p>P.S. This isn't about how to fix it, this is about whether it should work like this.</p>