border-radius not working in Chrome? Any workaround?

Question

I have set border-radius (and -moz-border-radius for the older browsers) to 20px, and I have it working beautifully in Safari and Firefox. Then, I open up Chrome and it's refusing to accept the defined border-radius. Any suggestions to work around this in Chrome?

See the CSS coding in action here: http://jsfiddle.net/MAYea/

Screenshot in Safari:

Screenshot in Chrome:

Answer 1

It's not that border-radius isn't working, it's that overflow is failing to hide the overflow.

This is actually a new bug in Chrome. I have a similar problem on my Doomsday clock even though it worked perfectly in an earlier version of Chrome.

As a workaround, you can specify the border-radius on the contained elements as well as the container.