title: Webkit not respecting overflow:hidden with border radius
body: <p>I have a lovely Star Trek Red Alert animation using CSS3.  One of my parent elements has a <code>border-radius</code> along with <code>overflow:hidden</code> so that any content is cropped to the shape of the border radius.</p>
  
  <p>This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area.</p>
  
  <p>Here is my code:</p>
  
  <p><a href="http://jsfiddle.net/doublewombat/EqK6R/embedded/result/" rel="noreferrer">http://jsfiddle.net/doublewombat/EqK6R/embedded/result/</a></p>
  
  <p>The <code>div</code> with the class name <code>curvedEdges</code> has the <code>border-radius</code> and <code>overflow:hidden</code>.  However the blocks left &amp; right of the 'Alert' text hang outside of this radius, even though they are child elements of <code>curvedEdges</code>.  Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight.</p>
  
  <p>So is this a bug in Webkit, or have I got something wrong?</p>
  
  <p>Here it is on YouTube if you don't have a Webkit browser handy...</p>
  
  <p><a href="http://www.youtube.com/watch?v=3vyVy21nWsE" rel="noreferrer">http://www.youtube.com/watch?v=3vyVy21nWsE</a></p>