title: Rounded corners fail to cut off content in webkit browsers if position:relative
body: <p>Rounded corners fail to cut off content in webkit browsers (e.g. Chrome) if <code>position:relative;</code></p>
  
  <p>See this <a href="http://jsfiddle.net/eCsA3/" rel="noreferrer">demo</a>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.outer {
      background:yellow;
      border:solid 1px black;
      position:relative;/* Setting this means rounded corners don't cut off content! */
      overflow:hidden;
  
      -moz-border-radius: 12px;
      border-radius: 12px;   
  }
  .inner {
      background:red;
      height:50px;
  }
  </code></pre>
  
  <p>Anyone know of a fix?  Thanks-</p>