For some reason and Im guessing Opera doesnt support this feature, or my coding is wrong,(possibly the stacking order ??). Opera is not recognising -o-border-radius when Im trying to assign it to rounding corners on an image file .
It puts round corners on all other elements like a div content box or on my navigation end tabs, its just the inline image files its not recognising.
All of the other latest browsers so thats FF 4.0.1/IE9/Safari 5.0.5/Chrome 11.0.696. all render the site with border radius working fine and dandy .
Its only Opera that Im having problems with it not rendering border radius on an inline image, all other browsers support this feature. Just cannot understand why Opera renders border radius on other elements but not inline images?
Is there a correct way for the stacking order ? ( I do know that the non-proprietary line goes last so border-radius:em; )
Hello, thats news to me that they all work. Border-radius should come last in the order. If Opera doesn’t work it’s probably not supported. Opera and ie8 less.
No opera doesn’t clip the image. It applies the border radius but the border falls behind the image and the image doesn’t get rounded.
Just add a 10px coloured border to the image and you can see what opera does.
The only real solution is to use a background image instead or add 10px coloured border (or padding) for a rounded effect around the image although the image will still be square.
Hm, didn’t know that. Like Eric I always thought that you couldn’t give rounded borders to images. But, being the Opera fanboy that I am, I’m sure all the other browsers are wrong in this case.
AFIK, border-radius rounds the containing element. for example if you use B-R on a UL the corners of its (first and last) child LIs will poke out. Similarly, with with images, the corners of the replaced content ( the actual IMG file) will poke out over the rounded corners in ANY browser.
Border-radius is supposed to clip, since it’s been considered a “bug” whenever it didn’t. So webkit introduced a lot of properties that pertain just to the clipping and specifically which “box” you want to clip it to (the border-box, padding-box, or… forget the last one).
Recently I needed to clip and image because the mobile stylesheet had a light background and instead of swapping images I thought, meh, I’ll try border-radius… Chrome finally fixed it, image was cropped : ) Firefox 3 of course did not crop, nor Opera, but FF4 did I believe. As dresden notes, cropping a container won’t crop a child… both the container AND the image inside needed border-radius to work in Chrome. I wonder if some inherit-like property will be introduced at some point?
IE9 has a nasty bug tho: if you’re rounding corners on something which you’ve also put a CSS gradient on, IE9 doesn’t clip the gradient (but if you swap gradients for just a solid bg colour, no problem). One of the first IE9 bugs I heard of : )
Border-radius didn’t use to work on images in older versions of Firefox but now works in all modern browsers except opera. Even background-clip has no effect in and indeed background-clip is buggy in opera anyway as applying it has the opposite effect and in round corners on normal elements the background color bleeds through whereas in other browsers it tidies up the odd pixels on the corners.
Yes , I saw that bug crop up in another thread where the OP wanted some gradient tabs. It’s caused by the IE proprietary filter which always seems to treat elements as a whole and paints to the edge.
I managed to get the rounding effect by using an inset box shadow which mostly masks the issue if you are careful with colours. Here’s the example but needs to be viewed in IE9.
