Grow your CSS skills. Land your dream job.

Chrome -webkit-border-radius bug?

  • # March 18, 2011 at 2:09 pm

    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: Image and video hosting by TinyPic

    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!

    # March 18, 2011 at 3:14 pm

    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.

    # March 18, 2011 at 3:17 pm

    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

    # March 18, 2011 at 3:36 pm

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

    # May 2, 2011 at 2:25 pm

    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.

    # May 2, 2011 at 2:30 pm

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

    # May 2, 2011 at 2:44 pm

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

    Let me know if you get it working!

    # May 2, 2011 at 3:17 pm

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

    # May 2, 2011 at 6:15 pm

    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

    # May 3, 2011 at 10:17 am

    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.

    # May 3, 2011 at 11:21 am

    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!

    # May 12, 2012 at 12:59 pm

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

    # May 12, 2012 at 1:01 pm

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

    # July 6, 2012 at 8:41 am

    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.

    # October 17, 2012 at 8:32 pm

    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.

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".