Css3 rounded corner in chrome come out looking funny.

[pdxSherpa]

I am developing a site with free images for artist, develper, whatever.
the ronded corner effects comes out fine in firefox.
but not as nice in chrome.

http://www.iwantanimage.com/buildings/buildings01.html

Is there a good suggestion on how to fix this please?

and this of course it the code that I used.

#mainPageTable2 img{
width: 288px;
height: 216px;
border: #000000 medium solid;
-webkit-transition: background 3s;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
 border-top-left-radius: 7px;
 
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;

-moz-border-radius-bottomright: 30px;
-webkit-border-bottom-right-radius: 30px;
border-bottom-right-radius: 30px;

-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
}

[Force Flow]

It's a known bug in webkit.

It's not pretty, but here's a fix I ended up going with:

#thing img{
    border: 1px solid black;
    -webkit-box-shadow: 0px 0px 0px 1px black; /* fix for border-radius on img not clipping corners in chrome */
}


@media screen and (-webkit-min-device-pixel-ratio:0) { /* target Safari and Chrome */    
    #thing img{       
        border:none; /* fix for border-radius on img not clipping corners in chrome */   
    } 
}

[pdxSherpa]

thank you Force, will go try it out.
hope the bug will get fix sometimes in the future.
D

[Force Flow]

From what I understand, it's been a long-standing bug.

There's a bug report from 2010 about it: http://code.google.com/p/chromium/is...etail?id=62363

[pdxSherpa]

yeah...kinda thought that might be the case.

[dresden_phoenix]

It's odd. Safari ( I tested it on 5.x) which uses -webkit doesnt show the bug BUT old versions of FF ( I had 3.6 on that same machine) does.

[pdxSherpa]

It works great on my ff, even w/the fix suggested by Force it looks crappy on chrome.
Google how could you?!?

It's odd. Safari ( I tested it on 5.x) which uses -webkit doesnt show the bug BUT old versions of FF ( I had 3.6 on that same machine) does.

[Force Flow]

It works great on my ff, even w/the fix suggested by Force it looks crappy on chrome.
Google how could you?!?

You will likely need to make the appropriate changes to the code in order to match your corner and border width/color.

[pdxSherpa]

Thanks Force, but i did.
I was using more than one pix. didn't think it worked that hot but will take one more look.