Forums

  • # 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: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.

    # October 18, 2012 at 12:39 am

    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.

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag