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 CSS3.info, 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.