What goes round comes round... Rounded corners revisited

Some years after rounded corners became extremely popular, our beloved Internet Explorer, even the IE 8, will not let you achieve this without some tricks. The good news is, that Internet Explorer 9 will support rounded corners, that means in 10 years we won’t have to care anymore… Until then, the easiest way I have found to overcome this restriction, is to use a behaviour. You can download the .htc-File from Google-Code here.

Your CSS would then probably look like this:

.roundBox { -moz-border-radius: 10px; /* Firefox / -webkit-border-radius: 10px; / Safari, Chrome / -khtml-border-radius: 10px; / KHTML / border-radius: 10px; / CSS3 / behavior: url(border-radius.htc); background: #fff; / for non-css3 browsers */ border:1px solid #d3d3d3; padding:10px; }

Note that the path to the .htc-File is relative to the HTML-File that is using it, not relative to the CSS File. I have found two restrictions that come along with this method, one can be solved with markup in most cases.

• You cannot add a background image for the same element with using no-repeat and custom positioning
• When you are changing the size of the box with Javascript, depending on what you are changing, it can be a deal breaker. I have read that you can add the behaviour after your changes with Javascript, but I did not try that.

In my case, where the rounded box was resizing with a sliding down animation, this method did not work anymore.. First I wanted to leave the IE users in ugliness, but then I decided to use the good old image corners with conditional comments for IE < 9. There are just too many people out there using this “hell-horse”…