Kicking IE to the Curb for Some Round Corners

Lately there’s been a lot of buzz about CSS3 and its new features.  Articles are popping up like daisies!  The Web Designer’s wall is showing examples of CSS3 and Design informer tells us we can “Use CSS3 Now” (fantastic agreement with this post, btw).  But I’m most concerned about one thing in CSS3 – rounded corners. Finally we have a simple, beautiful way to enhance our sites with little effort…except there’s one browser who doesn’t play nice.  Everyone’s favorite browser to hate – Internet Explorer. Yes, even IE8 has failed to implement some rudimentary support for rounded corners in CSS3 and that is a problem. Safari/Webkit, Chrome, and Firefox are currently leading the CSS3 front with Opera slowly catching up. With so many browsers (and their represented users) currently supporting some form of rounded corners, I felt I had no choice but to move forward without IE.

Rounded corners on Firefox vs. IE

Currently, I am finishing up a design/development project for Meriwether Godsey, a catering company based here in Lynchburg VA and my current employer (until Feb 26). The design features a series of rounded boxes to feature all of their sidebar content as opposed to a “stacked blocks” look it had before. I had an interesting revelation during the development of this site. I came to my boss with the proposition of giving modern browsers the CSS to have rounded corners, knowing that IE would be forced to render the content as squared “blocks.” After showing her the proposed solution in both sets of browsers, she replied “that’s fine!” I was a bit stunned, but excited at the same time. My goal was to save development time and to ensure cleaner code while providing a nicer look. In addition, I was able to save the user precious seconds that they would spend waiting on another image to download.

Was It Worth It?

With the bulk of the code now done, I can ask myself “Was it worth it?” The answer is a resounding “YES!” Using CSS3 now saved development time, it got the boss’s approval, it saves the user time, and eventually Microsoft will catch up with the rest of the world and users will see these great-looking corners. In the mean time, it’s not a big sacrifice. The design doesn’t look bad in Internet Explorer, so it’s not a big loss. If you’re on the fence about jumping into CSS3, my suggestion is go for it! You’ll be glad you did.

Blog Question

I write these articles for you, the reader more than for me. I want everyone to benefit from what I’ve learned. So, my question is “Do you like a shorter format like this? Or would you rather see a more detailed article?” I’d really appreciate it if you let me know in the comments or on twitter. Thanks!!