Code-only rounded HTML boxes

---

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.

---

---

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:

• Download a copy of the DD_roundies Javascript file - please do not hotlink mine, I am on a shared host.
• Refer to it in your document (second line of the example code a few bullets down).
• In another script node, add function calls to DD_roundies.addRule().
• addRule can 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: <script src="DD_roundies.js"></script>
<script>
  /* EXAMPLES */

  /* IE only */
  DD_roundies.addRule('.roundify', '10px');

  /* varying radii, IE only */
  DD_roundies.addRule('.something_else', '10px 4px');

  /* varying radii, "all" browsers */
  DD_roundies.addRule('.yet_another', '5px', true);
</script>

• 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.

---

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');

---

• Invoking 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: -moz-border-radius, -webkit-border-radius, and vanilla border-radius.

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 #content div).
• The declaration of this CSS is an MSIE-proprietary behavior - basically a Javascript expression bound to elements on the fly, without walking through a NodeList collection.
• 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.behavior to 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 offsetWidth, offsetHeight, offsetLeft, offsetTop, and currentStyle
• 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 z-index.
• To support various positioning and repeat background properties, some of the VML element gets a style.clip rectangle.

---

• This cannot be used on the <BODY> element, due to next/previousSibling DOM relationships.
• <TABLE>, <TR>, <TD>, <SELECT>, <OPTION>, <TEXTAREA> elements do not play nicely yet. Do not attempt.
• This script does not address background-position: fixed; functionality.
• "Fixed" <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 SRC must take on visibility:hidden;
• Testing for PNG image presence is done by Javascript string search. If you have a URL that doesn't end in .png, you're not in luck. I suppose I could add a 'force' option - let me know if you need it.
• 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.
• ???
• Profit!
• 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:
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.

---

---

---

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

Otherwise, you can email me.

---