Another Method For Creating Rounded Corners

• No 9-cell tables for one round box.
• No images.
• Doesn't add a half-dozen or more HTML nodes to a container element (more like one, maximum of two, and only in IE).
• Responds to Javascript element.style assignments and the :hover pseudo-class.
• 6.52Kb uncompressed - 3.67Kb compressed
• Accidentally provides correct alpha-transparent tiling PNG support in IE6
• Easy implementation:
  <script src="DD_roundies.js"></script>
<script>
    DD_roundies.addRule('.box', 10);
</script>


If you've ever worked on a web app, you've invariable gotten to the point where a client asks for something that doesn't sound difficult, yet, because of the market share of certain browsers (despite their near total lack of technical fitness), the feature that the client is asking for is difficult.

You may explain the situation, and the client may respond logically and remove the request, respond logically and insist that you move forward despite the time sink, or they might plainly give you the look of "This guy is feeding me designer bull-<expletive/>."

A prominent web developer recently experimented with making life easier on this front, and he noted some limitations. I thought his approach was novel - if you can't beat 'em, join 'em - and I got curious about what more experimenting might yield.

Criticism welcome. I don't claim to be a Javascript guru, and I'm surprised this works as well as it does!

The only "new" thing going on here lies within IE. Browsers that implement the border-width CSS property already have what is needed to make round-corner boxes.

What's going on in IE, however, is slightly bonkers:

• Invoking DD_roundies.addRule() adds a line of CSS to the document via DOM.
• 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.
• The content of the behavior executes a function in the scope of the element matched.
• 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 and styles using element.offsetWidth, element.offsetHeight, and element.currentStyle
• Using the above information, a VML <DD_roundies:shape/> node is constructed and appended to the element. Yes, element name prefixes are valid in XHTML.
• A path is added to the VML node to bring it to life.
• The VML node is absolutely positioned, relative to the top left of the parent element. It is stacked below visible content with z-index:-1.
• The parent element's backgound and borders are removed, and its padding is adjusted to compensate for the sudden loss of border width. This is why the element is clear beneath the curves, allowing lower-stacked content to "shine" through.