Improving border-radius.htc

I think many layout designers know the solution that makes IE draw rounded corners: " curved-corner " (or border-radius.htc).

In this article I will tell you how to get rid of “Invalid argument” errors when using it, and also how to speed up its work at times.

In one project where this method was applied, in IE 7 windows crashed with the following error:


')
It appeared exactly in border-radius.htc and this is what caused it:

var css = el.document.createStyleSheet();

It createStyleSheet out that using the createStyleSheet method, createStyleSheet can add up to 31 style sheets. After this value will be displayed error Invalid Argument.

Opening the DebugBar, I saw the following:



<Built-in style sheet> is the style sheet created by the script. And there were about 38 of them and they all contained the same code.

v\:roundrect {
BEHAVIOR: url(#default#VML)
}
v\:fill {
BEHAVIOR: url(#default#VML)
}

Hence the obvious solution: we simply paste this code into a css-file, which we connect via Conditional comments only for IE. And in border-radius.htc, we delete (or comment on) these 3 lines:

var css = el.document.createStyleSheet();
css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
css.addRule("v\\:fill", "behavior: url(#default#VML)");

As a result, Invalid Argument errors disappeared and the site loading time in IE decreased, since no longer need to generate 38 style sheets.

Profit!