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 each browser plus the standard border-radius:

www.cenquizqui.com

The upper content box that holds the pictures, called #screen

a copy paste of screen's css:

#screen {background: none repeat scroll 0 0 #EEEEEE;
    display: block;
    height: 300px;
    position: relative;
    width: 960px;
    overflow:hidden;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;}

Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.

Regards G.Campos

Answer 1

There is a much simpler solution.

Just add overflow:hidden to the container that has the border-radius and holds the child elements. This prevents the children 'flowing' over the container.. Thus fixing the problem and showing the border-radius

Answer 2

Here's a workaround that will fix the current chrome bug:

.element-that-holds-pictures {
   perspective: 1px; /* any non-zero value will work */
}

This won't affect the display at all (unlike the opacity:0.99 workaround - which is great workaround, too, by the way).

Answer 3

Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.

Answer 4

Try the following css to the child elements of the element with border-radius set: opacity:0.99; It solves the problem and doesn't change the opacity much. This worked perfectly for me.