Css3 rounded corner in chrome come out looking funny

HTML & CSS
1

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

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 */   
    } 
}
3

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

4

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/issues/detail?id=62363

5

yeah…kinda thought that might be the case.

6

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.

7

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

8

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

9

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.