The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Chrome -webkit-border-radius bug?

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
  • #32054


    Have a look at my site, using Chrome v.10 on Win7 :

    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.



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



    Hey, thanks for your help. Looks like webkit doesn’t need the -webkit prefix anymore ( ; 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.. :)


    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.


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


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

    Let me know if you get it working!


    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:


    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.


    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!


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


    img {
    padding: 0;
    -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:


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


    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.


    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)
  • The forum ‘CSS’ is closed to new topics and replies.