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

It does not work in Opera as well. – c69 Jan 03 '12 at 10:13 — c69, Jan 03 '12 at 10:13

score 29 · Answer 1 · answered Jan 14 '15 at 00:09

29

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

answered Jan 14 '15 at 00:09

Adam Jenkins

51,445
11
72
100

This needs to be the accepted answer for Chrome Browser – ntgCleaner May 19 '15 at 21:04
Excellent! I used the `opacity:0.99;` workaround, since the `perspective:1px; ` although would fix it for Chrome/Opera, on animation would make disappear the container element for Firefox, – j4v1 Nov 26 '16 at 20:19

Capagris · Accepted Answer · 2012-01-21T16:35:42.337

9

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.

edited Jan 21 '12 at 16:35

answered Jan 12 '12 at 16:57

Capagris

3,811
5
30
44

1

couldn't find any documentation regarding this bug or flaw - if anyone does, plz do tell – Capagris May 06 '12 at 08:16
1

http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera – Timo Huovinen Jul 09 '12 at 11:35

score 4 · Answer 3 · answered Aug 25 '15 at 12:59

4

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

answered Aug 25 '15 at 12:59

DutchKevv

1,659
2
22
39

kirtan-shah · Answer 4 · 2014-12-03T05:15:14.600

1

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.

edited Dec 03 '14 at 05:15

answered Nov 22 '14 at 06:10

kirtan-shah

405
7
21

score 0 · Answer 5 · answered Jan 02 '12 at 21:03

0

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

answered Jan 02 '12 at 21:03

justinlabenne

793
3
6

That's going to give a very unappealing effect. – AlienWebguy Jan 02 '12 at 21:05
to me and you yes, only trying to assist with tracking down where Sotkra may look to make changes. – justinlabenne Jan 02 '12 at 21:08
well yes, I can apply it to the li element, but then, as the slides get passed around, the 'corners' between slides wouldn't be seamless. Ultimately, the question here is, why does this happen on chrome but not ff or ie9? – Capagris Jan 02 '12 at 22:56
1

From what I have read it appears to be a bug with chrome. Chris Coyier posted a link to a possible fix using JQuery: http://css-tricks.com/forums/discussion/comment/45242#Comment_45242 – justinlabenne Jan 03 '12 at 01:56
1

The thing is, I dont have a div and an img inside it, I have a div with css background image. The solution normally presented for the people trying to get an img element inside a div is to apply the background img through css, and that is what im doing and it is still not working. This seems to be an overall flaw in chrome – Capagris Jan 03 '12 at 03:05

score 0 · Answer 6 · answered Jan 02 '12 at 21:10

0

It very much does have a border radius:

enter image description here

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

answered Jan 02 '12 at 21:10

Purag

16,941
4
54
75

3

Yes I know but...is this a chrome-only 'thing' because firefox seems to deal with it just fine. Hell, even the crappiest browser alive, ie9, handles it just fine. I wonder if this can be fixed with some sort of background clip property... – Capagris Jan 02 '12 at 22:55
1

I was also wondering if the absolute positioning and z-index was ruining the clipping through border-radius. I removed both and the bug persists. – Capagris Jan 03 '12 at 00:57
@Sotkra, Nope this also occurs in Safari and Opera. It seems that Firefox and IE are the ones that got it right. And you really should take another look at IE9/10 as their Javascript engine is by far the fastest and most responsive of all the browsers out there. IE has really cleaned up a ton of things and many of the big bugs I run into now are webkit issues. – Aaron Oct 02 '12 at 02:23
I will, but im doubtful of anything microsoft builds =/ – Capagris Oct 02 '12 at 02:36

CSS Border radius not trimming image on Webkit

6 Answers6

Linked