As follows is DD_roundies, another (hopefully improved) implementation of rounded corners in an HTML document:
http://dillerdesign.com/experiment/DD_roundies/
…
Recently, Jonathan Snook published an interesting experiment using VML in Internet Explorer to bring that technically sedentary browser something similar to what can be done in standard browsers with the border-radius CSS property. I wanted to see where I could take it from there.
Drew Diller's blog 
December 4, 2008 at 2:36 am
Drew, DD_roundies is looking like it could be the holy grail (short of, dare we ask, IE actually supporting border-radius) of rounded corner scripts.
Thanks for the hard work. I may actually implement this on a fairly large scale project. I’ll let you know if I do and run into any issues.
December 4, 2008 at 2:51 am
Thank you, Rob! Like the version number implies, I plan on continuing development of this script. I want correct implementations of background-repeat and background-position more than anything.
December 4, 2008 at 7:34 am
Drew, I tested on Opera/9.62 and it doesn’t work. But it does work on Safari (iPhone too). When I tested it on IE6 I got a javascript error. Thanks for this script and keep up the good work!
December 4, 2008 at 12:00 pm
It does not work in Opera 😦
December 4, 2008 at 2:55 pm
Looks very promising!!! I saw an error on the page looking with IE6 but it was caused by the digg.com script on the page…
December 4, 2008 at 2:57 pm
ttutuncu and Sam, indeed it does not (yet) work in Opera. I did note this: http://dillerdesign.com/experiment/DD_roundies/#lacking
The main point here is that the roundies work in IE6 and 7. You could include this script only for those guys using conditional comments, and then use a or SVG solution (and there are a few already out in the wild) for the other browsers, including Opera.
December 4, 2008 at 5:10 pm
It’s just amazing.
I was looking in these days for an IE border-radius alternative and I discovered this some minutes ago on the delicious home page.
I’m already experimenting it here! (using conditional comments)
here 2 notes:
1. adding a DD_roundies class to a form element (as inputs, textareas) cause a javascript error.
2. some divs loose their height in a random way. I think the problem is somewhere in the loading stage.
anyway, great work!
December 4, 2008 at 6:17 pm
pinit, good deal! Thanks for the bug reports. Keep ’em coming. I intend to continue to developing this.
December 5, 2008 at 10:07 pm
Wow, this looks promising, just tested in on my site and this maybe the best solution yet!
Will you add support for having different corners on a box with something like DD_roundies.addRule(‘.box’, 10 10 0 0); too?
December 5, 2008 at 10:19 pm
Paperboy: Indeed I will, because I would want to use such a feature! Development on this is still present and under way.
December 7, 2008 at 11:52 am
By far the best solution I have seen for IE. I will be using it for sure. Thank you so much!! One thing i would really like to see is the ability to round just the top 2 corners or perhaps the bottom 2 as well …for creating tabbed navigation, otherwise an excellent job very well done!
December 8, 2008 at 10:00 am
Unfortunately it doesn’t work in IE 8
error on line 31
and on line 47
if (this.styleSheet.addRule) { /* IE */
but great work!
December 8, 2008 at 3:33 pm
Martin, indeed, IE8 doesn’t even have VML yet. I have noted this:
http://www.dillerdesign.com/experiment/DD_roundies/#lacking
December 8, 2008 at 8:17 pm
Great work so far~! I’ve taken a copy of your script and modified it to allow different sized corners by supplying an array of numbers for the radius and changing the updateVmlPath function. I’ll be happy to send you my changes if you would like.
Have you ever thought about just letting the web developer be able to set the behavior attribute in the css for IE instead doing all the javascript calls such as DD_roundies.addRule()?
example:
.rounded {
behavior : expression( DD_roundies.roundifyElement.call(this, 10) );
}
December 10, 2008 at 2:01 am
Thanks for this – very interesting solution – note: actually its not working for me in Safari 3.2.1 Mac – possible selector problem? I’m using the packed version. Works a treat in FF3.
December 10, 2008 at 2:21 am
actually – my bad – was a problem with padding – when set below the corner radius in webkit browsers it switched off the rounding. Nothing to see here… move along…
December 10, 2008 at 12:48 pm
@Eugene — I think Drew was pointing out that behaviors are performance no-no’s so the script removes those (?).
Anyone thinking about the roundies and the transparency might look at:
December 10, 2008 at 1:14 pm
Oh hey Drew, any thoughts on when you might back the PNG repeat and position fixes into this script too?
December 10, 2008 at 3:21 pm
Rob: Probably before the weekend.
Regarding that link you posted, I did manage to work around the lack of onload by using dummy image elements appended to . It’s hackish. I’m open to alternatives.
Also, I should test the claim that the VML images aren’t cached between page loads. I wonder if BackgroundImageCache will have something to say about that (crosses fingers).
December 10, 2008 at 4:31 pm
@Drew: huh, yeah: (BackgroundImageCache) that could be key… but VML may operate at a whole different level, I dunno.
December 15, 2008 at 10:03 pm
Wow!!!! The web design world will now be changed forever! Rounded corners are everything in design and now they are easily possible!!
Thanks a ton!
December 16, 2008 at 12:46 pm
This solution gives me goosebumps (will not say what it actually gives me).
One question though: When you say that one could add a boolean indicating whether you wish to add styles for standards-compliant browsers, how does that work?
Great work and thanks so much!
December 16, 2008 at 2:29 pm
Quin, ok, that question is kind of funny. The boolean would default to false, and the function should ask, “Should I add border-radius CSS to the document in browsers other than Internet Explorer?” – the boolean would by default say “no”, and the user could change the boolean to true in the call to roundify, such as DD_roundies.roundify(‘.your .selector’, 10, true);
Thing is, if you look at the script, it just adds the styles. It doesn’t check for the boolean at all. I completely forgot to write it. So it doesn’t matter if the third argument is there or not. I will fix this for release 0.0.2a (have already done so, but the code is not release-quality yet).
December 17, 2008 at 8:21 pm
Yes, this looks promising indeed!
The best rounded corners solution so far, with no doubt.
One thing, my css is not validating with this script. The validator complains about border-radius, -moz-border-radius and -webkit-border-radius
Is there any work around to make this 100% webstandard ?
December 17, 2008 at 9:55 pm
Marco, no, there isn’t. Those are the styles required to make rounded corners in non-IE browsers.
However, the border-radius property will be standard eventually: http://www.w3.org/TR/css3-background/#the-border-radius
December 18, 2008 at 5:06 pm
Oh, but that’s CSS3.. still a long way to go, no?
I still think this is the best rounded corner solution, and I thank you for sharing 🙂
But I might wait until CSS3 then, since having non-standard website is out of question due to my work.
But that’s just me. I’m sure that I will end up using this nice script again..
December 24, 2008 at 9:10 am
Drew, Amazing script but mine seems not to work in IE 7 or 8, works fine in Safari and FF tho… Any ideas? http://adamtarry.co.uk/benkaye/
December 24, 2008 at 4:49 pm
Adam, IE7 does work. Are you behind McAfee antivirus or using Parallels? I’d be interested in hearing about the former.
IE8 is what I’m working on currently for 0.0.2a – almost there.
December 27, 2008 at 11:13 pm
Sorry for my English…
Thanks for the hard work.
I’ve just tried it in a new website for a restyling.
Very good.
But sometimes some borders disappear…
A memory problem or what ?
Bye