Please upgrade your browser for increased viewing pleasure of this website (as well as most other websites on the internet)




A technique that I really enjoy using for rounding the corners of block-level elements is border-radius. This technique is used throughout the We The Media website (as you may have noticed). Implementing border-radius isn’t too hard, though the code is a bit heavy as different browsers require specific CSS (i.e. -moz- for Firefox and -webkit- for Safari/Chrome). I don’t want to get into the actual code for this, but good examples can be found at The Art of Web and The W3C.

I find this little bit of code very handy for easily adding rounded corners. In the past, I used to add extra divs to make rounded cornered boxes extendible in the code. The major drawback is that it doesn’t work in Internet Explorer browsers (big surprise there), but I am willing to have it gracefully degrade.

Ok, so this doesn’t work in IE, but the good folks at HTMLremix have been working on a solution for this problem. They have developed the “Curved-Corner” project that just requires you to add an .htc file and link it in the CSS (as far as I can tell), but I have not been having much luck (though I haven’t tried very hard yet). The .htc file is available at Google Code. If you have gotten this to work, feel free to drop a comment and share your knowledge. For now, I am not too worried about this working on IE (at least for this site).

According to, Microsoft does say that they will be supporting CSS3 in their upcoming Internet Explorer 9 browser. Let’s all hope, but for now we have plenty of other good browsers to use that support this cool attribute.

One Response to “Border-Radius, it’s nice!”

posted 02.08.2010

I’ve also used this CurvyCorners JavaScript to achieve rounded corner support in IE and Opera:

Native border-radius is used if available. If not, the JS takes over and adds rounded corners to any element with border-radius applied in the CSS.

Then again, I’m not too concerned with straight corners in IE. I think it depends upon the client/project.

Leave Your Comment

Required fields are marked with an asterisk (*)