DD_roundies

by Drew Diller

0.0.1a released 2008.12.07
Current: 0.0.2a on 2009.01.01
release updates / changelog

Code-only rounded HTML boxes

DD_roundies is free software under the MIT License.
Please familiarize yourself with known issues.
You might also enjoy DD_belatedPNG.

2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. Things have changed.

I spent some time away from the project before IE8 final was released. When I came back to it, much had changed. Too much. The 80/20 rule was replaced with what I'd call the 95:5 rule. The cost/benefit ratio was too ridiculous for me to continue work on this project.

Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point.

Turns out I like riding my bicycle during my free time more than maintaining this project.

That said, IE9 is supposedly offering itself as an update. Native support for border-radius is going to be much more fun than VML.

This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If you feel that my having abandoned this project is in poor taste, let me know, as I have all the records of people who kindly made donations here, and I will refund your money.

If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead.


This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer.

IE is supported through use of VML. Standards-compliant browsers are, by default, ignored. If you wish it so, each call to DD_roundies.addRule can take an optional third parameter that will spit out appropriate proprietary code for browsers that are known to support the CSS border-radius property.

Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. If you need something truly cross browser, use this library only for IE (through conditional comments), and use an SVG background image for other browsers.

As of 0.0.2a, IE now supports varying border thicknesses, matching Mozilla's implementation almost pixel-for-pixel.

It also happens to include correct support for PNG images in IE6, using code borrowed from my other free software, DD_belatedPNG.


Table of Contents


Quick summary:

This uses Microsoft's implementation of VML for Internet Explorer. For other browsers, this adds simple border-radius styles to the document (IF and only if you specify the third argument in DD_belatedPNG.addRule).

The third argument in addRule defaults to false. This library does focus primarily on IE.


The intended implementation is pretty easy:


Specifically regarding the second argument in the addRule(), values for the topleft, topright, bottomright, and bottomleft are implied, in that order.

This is modeled after how CSS border-width is implied (where one value sets all, two values sets the top/bottom and right/left, etc):


If you want to, you can forgo using both DD_belatedPNG and DD_roundies together. Just use DD_roundies, and make a call like this for boxes whose corners you don't wish to round but would like to fix the PNG within: /* notice the lacking second and third argument? */
/* the radii will default to zero */
DD_roundies.addRule('.your .example img');

That's where the similarities between IE's implementation and other browsers' implementation end.

If the third argument of addRule is specified and true, non-IE browsers simply add some rules: -moz-border-radius, -webkit-border-radius, and vanilla border-radius.

IE, on the other hand, has to do a lot more:


Found something wrong? Send me bugs!


This has been tested to work in IE6, IE7, Firefox 3.0.x, Safari 3.1.2, and Google Chrome 1.0. Opera has no support at the moment, but it looks like it will at some point in the future, so hang tight.

There is partial support for IE8 beta 2. A lot doesn't work: background images, resizing (seriously, the window.onresize event doesn't fire, what the <expletive/> ?), etc. Also NOTE that IE8 is INCREDIBLY slow at implementing roundies, for reasons I have yet to discover.



DD_roundies is free software under the MIT License.

The License shall remain addressable at this URL:
http://dillerdesign.com/experiment/DD_roundies/#license

Copyright (c) 2008 Drew Diller

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


My thanks to Jonathan Snook for pointing out something else I had written was almost there for good PNG support.


0.0.2a.js (Uncompressed, ~17Kb)
0.0.2a-min.js (Compressed, ~9Kb)


Any donations are sincerely appreciated, and help reduce the occurrence of glares from my wife when I am staying up past her bedtime writing software.


  • 0.0.2a / 2008.12.09 (source.js / packed.js)
    • Each matched element and its offsetParent is now forced into receiving hasLayout.
    • If a z-index is specified on the matched element, it is now copied to the VML.
    • Munged in proper background-(image/position/repeat) PNG support for IE6.
    • Tentative support for element opacity in IE.
    • Multiple radii support.
    • Multiple border-width support in IE.
    • Proof-of-concept but very incomplete support for IE8.
    • "Size finder" images in IE are created in a much less lazy/aggressive, as-needed basis.
  • 0.0.1a / 2008.12.02 (source.js / packed.js)
    • Initial release.

CSS Background Properties (relevant for IE6)

Use these fields to change background properties.

The last field is a text field and will accept 'red' or '#F00' or '#FF0000'.


Javascript Animation

Click on me.

A:hover Psuedo-Class Support

Run your mouse over these:

psuedo class

Totally Round Example


Multiple Border Widths / Radii

Warning: This doesn't look so good in WebKit browsers.




There is a blog post about this at dillerdesign.wordpress.com.

Otherwise, you can email me.