Forums

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!

wolfcry911

Safari doesn't clip the image either. It's only a candidate recommendation, but the specs show it should be clipped:
5.3. Corner Clipping

A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.

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?

chriscoyier

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

patrickzdb

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.

joelcarlo

There is a workaround here. It uses box-shadow to create a generic border element. Should work until a bug fix is made.

img {
border-radius: 5px; 
box-shadow: 0px 0px 0px 1px green;
}

briandesu

Just jumpin' on the hack train. I noticed a similar effect happening when I tried to have an element fade in and out with opacity. Much to my surprise when opacity hit 1 Chrome would no longer clip the edges of content within my container. So, I hacked my way around it by setting opacity to 0.99999.

{
opacity: 1
}

Children bleed around rounded border.

{
opacity: 0.99999
}

Children will no longer bleed around rounded border. Ugly, but it works.

treehouse : what would you like to learn today?

Forums

Chrome -webkit-border-radius bug?