CSS Border radius not trimming image on Webkit

Question

I\'m having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?

I have all the different prefixes for ea

Answer 1

It very much does have a border radius:

(I just added a border with Chrome's dev toolbar.)

The border radius doesn't restrict its contents to within the resulting area—the space outside the corners are still occupiable by the element's contents.

My recommendation would be to overlay an image that had the corners cut out like that (and then use a map or whatever you feel comfortable with to still enable the left/right arrows).