Chrome -webkit-border-radius bug?

[richardmtl]

Hi!

Have a look at my site, using Chrome v.10 on Win7 : http://mexicometro.org

Notice that the corners of the images don’t get rounded? Pic for those who want to have a look:

No have a look in FF4 RC. The image is nicely rounded; no overlap of the images into the border, as I’d expect it to do.

I haven’t checked this in Safari yet.

Is this a Chrome bug, a webkit bug, or not actually a bug? Any way to fix it? I’ve searched but haven’t found anyone else with this issue yet.

Thanks!

[jkudish]

Hey Richard,

I am almost 100% sure that border-radius won’t work on images in webkit. Best way be to wrap in a <div> that is a few px smaller than the image or to just have an image with rounded corners :)

cheers

[richardmtl]

Hey, thanks for your help. Looks like webkit doesn’t need the -webkit prefix anymore (http://php.quicoto.com/drop-the-webkit-prefix-for-border-radius/ ; can’t find something more official just right now).. so, any ideas on how to keep border-radius for FF4 (and not -moz-border-radius for FF3.6 since it doesn’t clip the image either), yet hide it from webkit browsers until they actually clip the image like FF4 does? I know this is asking for a lot, and I don’t want something too hacky.. :)

[thelumberjack]

Try setting the border to transparent. The downside to this is you no longer have a border – but at least it rounds the corners of the images. I will keep looking for other solutions.

[richardmtl]

Hey, thanks for the tip. I haven’t actually tried playing with it anymore, recently. I’ll try reading more on using clip (and it seems I saw another solution recently; forgot where!)

[thelumberjack]

No problem. I also tried adding “overflow: hidden” but no dice.

Let me know if you get it working!

[thelumberjack]

Is it just me, or is the same bug occurring in Safari as well?

[Chris Coyier]

Only way to do it is to set it as a background-image of the element with border-radius.

You can dynamically swap them out: http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

[joebob]

I had a similar situation with a slideshow that would not clip the corners. I had some space around it so I set a rounded-corner div on top of it with thick borders that matched the background. The slideshow appeared through it with the effect of rounded corners.

[richardmtl]

Oh yeah, nice to see some responses here Thanks Chris for the help. Guess that the jQuery route is the way to go if I really want to make it work. too bad it doesn’t work with simple CSS!

[carasmo]

I wanted a 2 pixel black border on a rounded corner image and in webkit the image doesn’t get rounded, in FF it does. I did this and it looks identical and works in both FF and webkit:

-webkit-box-shadow: 0px 0px 0px 2px #000; /* Saf3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
box-shadow: 0px 0px 0px 2px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

[carasmo]

img {
padding: 0;
-webkit-border-radius:10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 0px 2px #000; /* Saf3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
box-shadow: 0px 0px 0px 2px #000; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

now in ie7 and 8 it won’t have a border so, depending on the html5 in your document, I do this:

html.ie7 img, html.ie8 img {border:2px solid #000;}

[Preface Studios Ltd]

I don’t understand why webkit haven’t fixed this issue since it was reported a year ago but anyways I found an alternative fix to the background-image one (I couldn’t get that to work myself).

Put the image in a container div and apply the border radius to that instead.

.webkit_fix {

border-radius: 10px;

overflow: hidden;

border:3px solid #fff;

position: static;

}

For some reason overflow:hidden and position:static fixes it. In my case it worked until I hovered over the image (as it was a link) then the bug was there again! I fixed this by adding border-radius to img:hover:

img:hover{

border-radius:10px;

}

Hope this helps anyone! Webkit need to sort this bug out.

[ivanflores]

I just did the trick, apply the radius to the container and the image, but the imagen without border, just like the example above, but without :hover, it should works.

[neerukool]

The following style for anchor tag should get you through:

border: 4px solid #5882B4;
height: 125px;
display: block;
width: 290px;
overflow: hidden;
border-radius: 20px;

Remove the border from image.

[Author]

Posts