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

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 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

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 4

It looks like you need to apply the border radius to the li element:

#slides li {
display: block;
float: left;
height: 300px;
width: 960px;
position: relative;
border-radius: 10px;
}

Answer 5

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.

Answer 6

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).