DD_roundiesby 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
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.
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
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
- Additional Usage
- Compatibility with DD_belatedPNG
- Technical Summary
- Known Issues
- Supported Browsers
- To-Do List
- Contact / Comments
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
The third argument in
addRule defaults to false. This library does focus primarily on IE.
The intended implementation is pretty easy:
- Refer to it in your document (second line of the example code a few bullets down).
- In another script node, add function calls to
addRulecan take up to three arguments:
- (REQUIRED) A text string representing a CSS selector
- (REQUIRED) A text string representing a border radius or radii (anywhere from 1 to 4, separated by commas)
- (OPTIONAL) A boolean indicating whether or not you want to make roundies just in IE (set to false), or attempt to make roundies in "all" browsers (set to true).
Here is an example:
/* EXAMPLES */
/* IE only */
/* varying radii, IE only */
DD_roundies.addRule('.something_else', '10px 4px');
/* varying radii, "all" browsers */
DD_roundies.addRule('.yet_another', '5px', true);
- As of 0.0.3a, you can roll a bunch of CSS selectors into one argument, just like how you'd do a selector group in a CSS file:
fix('.example1, .example2, img');
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):
'10px'sets all corner radii to 10px.
'10px 5px'sets the top-left and bottom-right corner radii to 10px, and the other corners to 5px.
'10px 5px 3px'sets the top-left to 10px, the top-right to 5px, the bottom-right to 3px, and the bottom-left to 5px.
'10px 5px 3px 0'sets the top-left to 10px, the top-right to 5px, the bottom-right to 3px, and the bottom-left to 0px.
/* notice the lacking second and third argument? */
/* the radii will default to zero */
DD_roundies.addRule('.your .example img');
DD_roundies.addRule()adds a line of CSS to the document via DOM.
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:
-webkit-border-radius, and vanilla
IE, on the other hand, has to do a lot more:
- The selector of this CSS is provided by the first argument for
addRule, which should be a string (such as
- The content of the behavior executes a function in the scope of each element matched, along with an array of radius values.
- The first duty of this function is to reset its own
style.behaviorto no longer have a value; allowing behaviors to continue unchallenged is a recipe of for CPU-eating disaster.
- The function then examines the element's dimensions, location, and styles using
- Using the above information, a VML
<DD_roundies:rect/>node is constructed and prepended (
insertBefore) to the element. Well, three VML elements actually: one for the stroke and its varying thickness, one for the background color (if present), and one for the background image.
- The border thicknesses are erased and added to their respective padding (left border gets added to left padding, etc), allowing the outer stroke to be visible.
- The VML node is absolutely positioned to follow behind the element like a lost little puppy. It copies the matched element's
- To support various positioning and repeat background properties, some of the VML element gets a
- This cannot be used on the
<BODY>element, due to next/previousSibling DOM relationships.
<TEXTAREA>elements do not play nicely yet. Do not attempt.
- This script does not address
<IMG/>elements must take on
visibility:hidden;, and thus become unclickable. I see no workaround other than using clear pixel GIF replacements, and that is code that I am not going to write.
<INPUT type="image"/>nodes are not supported. The node with the original PNG
SRCmust take on
- The corners will sometimes revert to square in WebKit. Examine your padding versus your border-radius - WebKit will cut things short if the radius is bigger than the padding value.
- IE8 beta 2 is incredibly slow at implementing this, and lacks background images.
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.
- Find bugs.
- Test for memory leaks.
- This item will always persist: find performance improvements.
- Pray that IE8 beta 3 will be better.
DD_roundies is free software under the MIT License.
The License shall remain addressable at this URL:
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.
Use these fields to change background properties.
The last field is a text field and will accept 'red' or '#F00' or '#FF0000'.
Run your mouse over these:psuedo class
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.