- This topic is empty.
-
AuthorPosts
-
March 18, 2011 at 2:09 pm #32054
richardmtl
ParticipantHi!
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!
March 18, 2011 at 3:17 pm #55223jkudish
MemberHey 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 #55212richardmtl
ParticipantHey, 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 #47935thelumberjack
MemberTry 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 #47936richardmtl
ParticipantHey, 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 #47937thelumberjack
MemberNo 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 #47938thelumberjack
MemberIs it just me, or is the same bug occurring in Safari as well?
May 2, 2011 at 6:15 pm #47930Chris Coyier
KeymasterOnly 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 #47876joebob
MemberI 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 #47880richardmtl
ParticipantOh 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 #102750carasmo
ParticipantI 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 #102751carasmo
Participantimg {
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 #105521Preface Studios Ltd
ParticipantI 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 #112162ivanflores
MemberI 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 #112156neerukool
ParticipantThe 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.