Webkit not respecting overflow:hidden with border radius
animation, css, overflow, webkit
Solution
You could put an absolute positioned div over it with a border-radius and a thick black border, it will block the parts you want too be hidden.
I made a demo for another question about a similar problem in FF3.6: http://jsfiddle.net/vfp3v/15/
border-radius; overflow: hidden, and text is not clipped
Problem
I have a lovely Star Trek Red Alert animation using CSS3. One of my parent elements has a `border-radius` along with `overflow:hidden` so that any content is cropped to the shape of the border radius. This all works fine in Firefox but Webkit browsers leave some child elements hanging outside the cropped area. Here is my code: http://jsfiddle.net/doublewombat/EqK6R/embedded/result/ The `div` with the class name `curvedEdges` has the `border-radius` and `overflow:hidden`. However the blocks left & right of the 'Alert' text hang outside of this radius, even though they are child elements of `curvedEdges`. Or in plain English, the left and right edges of the animation should be slightly curved (as in Firefox), not dead straight. So is this a bug in Webkit, or have I got something wrong? Here it is on YouTube if you don't have a Webkit browser handy... http://www.youtube.com/watch?v=3vyVy21nWsE