| Image with rounded corners (using CSS3) |   (votes: 10, avg: 4.00)  Loading ... |
W3C added nice new options for creating rounded corners of elements to their CSS3 working draft. Engines like Gecko, KHTML and WebKit already implemented these functions, but they use vendor prefixes in the keywords (-moz-border-radius, -khtml-border-radius and -webkit-border-radius respectively), because the feature is not yet fully standardized. That’s also the reason why Opera and Internet Explorer decided not to implement this extension for now.
I was playing with the rounded corners and I like this feature a lot, but I also hit one problem (in all 3 engines). When you use the border-radius with an img element, the image is drawn above the border, so it isn’t rounded (left example). Fortunately, the effect could be easily achieved by rounded div, setting its dimensions exactly to the image size and using the image as the div‘s background (right example).
 |
 |
<img style="border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;"
src="presov.jpg" />
|
<div style="border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
width: 180px;
height: 240px;
background: url('presov.jpg');" />
|
Update#1: I reported the issue to Gecko, KHTML and WebKit bugzillas.
Update#2: Dave Hyatt closed the WebKit bug with the comment: “This was fixed recently.” \o/
Nice
nifty little option!
Hopefully that’s a bug at the moment and will be fixed once the final spec is implemented as the box model does specify that the border sits on top of everything else in the box so I wouldn’t have expected that result.
Do Firefox and Safari both implement this in the same way at the moment?
@Dave Woods
I see the same behavior in all 3 engines that implemented this feature. (I added this info to blogpost).
Opera implements this featuere as well with -o-border-radius. See
http://operapl.net/planet.styles/planet3.css for an example.
@Ben
I tried both -o-border-radius and -opera-border-radius and neither of them worked in the latest Opera 9.64. I also found some posts on the opera website, that the support was dropped until the specification is finished.
In the case of dynamically loaded images you could use JavaScript to wrap the image in a tag, hide the image and set width, height, background and your border-radius goodness on the tag. Cool!
Its good but it not working on IE
@hemant
of course, this is CSS 3 feature and IE8 only has CSS 2.1 support (not sure about older versions)
In my testing this workaround does not work in Konqueror(KHTML) It still shows the square background. This is in Konqueror 4.2.4.
@Cody
Please add your observations to bugreport in KHTML bugzilla mentioned at the end of the blogpost.
So, is there still no way to round corners on an image using CSS3 until they fix this bug? For my implementation I can’t use it as the background image of a div.
@Bryce
I’m afraid not. What’s so special about your implementation that you can’t use div+background?
I was using a javascript image rotator that used inline images, but I’ve subsequently been able to make it work with div+background.
I’ve been working on a javascript image rotator and ive gone back and forth between using div + background image and just a regular img. As much as I would like to be able to round the top corners on my little slideshow, I can’t get it to work on images placed with an img tag. If I use a div background I can round the corners but I lose access to the img tag’s “.complete” feature that allows me to check if an image has fully downloaded before I try to manipulate it. Unless theres another way to check to see if a background image has completed download, I’m going to have to say that making the script better able to deal with slow connections is probably more important than round corners. Especially since support for radius is still lacking in some browsers. I’m open to suggestions though.
Thanks a lot for this info Pavol. I spent hours finding a good method to add rounded Facebook-like corners to a template for the JoomlaComment extension I am creating – I tried the JavaScript/JQuery methods (way too much overhead) and simple PNG-overlay graphics (doesn’t work well with transparent backgrounds), and despite this being a Draft-CSS3 implementation this is definately the best way to go (too bad IE users). Only your blog had the simple example code to make it happen!
P.S. For the ‘Facebook like’ corners (just a chop-off) a border of 0px transparent works well. Thanks again!
I just checked this with FF 3.5.3 and it still has the img square corners over the rounded corners of the border. I also checked it in Safari 4.0.2 and it has the corners rounded but it chops of the 2px border around the edges. I would expect the border to follow the corners all the way round like the div example does.
@hugh
Use the appropriate issues I mentioned at the bottom in Update #1 and report the problems there. I think these Developers don’t read comments in my blog
My problem is that I want the images to be links. For ads…
Awesome! Was getting the same problem but this solved it. I’ve applied it to my header on my site.
Thanks for sharing the solution.
@Paul, just place an absolutely positioned 100% in width and height link with no text inside the div. That will solve ya problem.
Hmm… Where does the alt text go?
@Paul
you can do the same with creating a class for the specific link so your markup will look something like this
Text link
and your css something like this
a.roundedbigbox{
width:300px; //width of your ad
height:250px; //height of your ad
display:block;
border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
text-indent:-10000em; // to hide your text version of the link
}
and you can change the border color for hover, visited etc.. like this
a.roundedbigbox:hover{
border: 2px solid red; // just changing the property that you want to change on the link state, everything else is inherited from the initial class styles
}
Hope that helps
- Dre
As a best practice, you should put border-radius: 30px AFTER the proprietary ones (-moz-border-radius: 30px, etc)…
@Dan
Do you have an explanation why?
@Pavol Rusnak
Pavol,
Placing the standard property after the proprietary ones will result in the standardized property being applied in place of the proprietary one as web-browsers update to support the standard properties. I’m not sure if that’s the only reason for this best practice, but it’s at least one good reason to do so.
Thanks for sharing however still have problem for setting width and height for the image in background. It seems image is not stretched to the div size.
Hmm .. still anyway to do it on a img tag ? I have some images into a slideshow ….
Just great!