title: Google Chrome position:fixed border-radius overflow:hidden issue
body: <p>I am having issues with Google Chrome while using <code>border-radius</code> on a <code>position:fixed</code> element with <code>overflow:hidden</code>. The <code>overflow</code> attribute does not seem to be working. When you hover over the navigation items the <code>div</code> with the red background, <code>.bmopt</code>, is supposed to be clipped to the shape of <code>#mstrip</code>, but instead it just shows as a standard rectangle.</p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div id='mstrip'&gt;
      &lt;div class='mlabel first'&gt;
          &lt;a href='#' class='mopt'&gt;Item1&lt;/a&gt;
          &lt;div class='bmopt'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='mlabel'&gt;
          &lt;a href='#' class='mopt'&gt;Item2&lt;/a&gt;
          &lt;div class='bmopt'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='mlabel'&gt;
          &lt;a href='#' class='mopt'&gt;Item3&lt;/a&gt;
          &lt;div class='bmopt'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='mlabel'&gt;
          &lt;a href='#' class='mopt'&gt;Item4&lt;/a&gt;
          &lt;div class='bmopt'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class='mlabel'&gt;
          &lt;a href='#' class='mopt'&gt;Item5&lt;/a&gt;
          &lt;div class='bmopt'&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#mstrip {
      width: 92px;
      height: 223px;
      position: fixed;
      top: 20px;
      border-radius: 40% 8px;
      z-index: 100;
      background: #000;
      overflow: hidden;
      box-shadow: 0 0 4px #000;
  }
  .mlabel {
      width: 92px;
      height: 35px;
  }
  .first {
      margin-top: 24px;
  }
  .mopt {
      display: block;
      width: 92px;
      height: 29px;
      padding-top: 6px;
      text-align: center;
      color: #FFF;
      text-decoration: none;
      font: menu;
      font-size: 0.9em;
      text-shadow: 0 0 1px #FFF;
  }
  .bmopt {
      position: relative;
      width: 92px;
      height: 35px;
      background: #F00;
      margin-top: -35px;
      z-index: -1;
  }
  </code></pre>
  
  <p>Here is a working example of this bug: <a href="http://jsfiddle.net/UxLHR/7/" rel="nofollow">http://jsfiddle.net/UxLHR/7/</a></p>
  
  <p>Is there a way around this?</p>