After much trial and error, deliberation, research, and head banging on my desk, I’ve finally come up with a solution to the programmer’s age-old cross-browser rounded corners dilemma that works for me. The dilemma, of course, is that it’s the year 2009 and rounded corners can be implemented in EVERY modern-day browser except our friend Internet Explorer. Even the most recent incarnation of IE (v8) STILL doesn’t support native rounded corners in CSS!
After dealing with rounded corner images, CSS hacks, javascript hacks, and extraneous markup hacks for years, I decided it was time to put this thing to rest and come up with a solution that works for every design I’m translating into CSS, no matter where the rounded corners appear (nav bar, floating divs, on images, on background images, etc…)
If you know anything about me you know that I’m a stickler for semantic markup and clean code in general. XHTML and CSS that validate. So you’ll get an idea of my frustration level with this rounded corner issue when you hear that the solution I’ve settled upon doesn’t validate CSS. Yes that’s right. However I’m sleeping just fine and I’m quite happy that this solution is keeping me from spending 20 hours to create a style sheet!
So what is it you ask?
In short, I’m using native CSS rounded corner support for all browsers except IE… and for IE I’m implementing the BEST javascript-based rounded corner solution I’ve found to date: DD_roundies. So in my CSS I use the standard Gecko and Webkit syntax for achieving my rounded corners. I then use conditional comments to include the DD_roundies solution for any version of IE. It’s that simple.
I’ve tried EVERY single rounded corner javascript library out there. I’m not kdding… at least 20 different solutions. None work as well in IE as DD_roundies. In fact, conditional comments aren’t even 100% necessary since DD_roundies won’t invoke on any browser except the IE’s! So in the end I get a style sheet that validates EVERYTHING except the border-radius properties, and a design that can include rounded corners almost anywhere I desire. It’s a sacrifice I’m willing to live with.