Wednesday, March 9, 2011

Crossing Browsers With Rounded Corners

Old post from the beginning of 2010 that I apparently forgot to hit publish on. With any luck the info is still helpful.


The Task
Working on a project that had some fancy rounded corners of several of the div's. The problem was that I had used up all of my background images on other cutsie effects (that is the exasperated developer in me talking). So without an anchor point to place my corner images I decided it was time to revisit the topic of rounded images.

The Problem
Firefox and Webkit both implement CSS3 border-radius. They are golden, however, I still have to address IE and its refusal to make my life easier. I knew I was going to need something more creative. I would prefer a drop-in, script-only solution. I found a few.

http://www.malsup.com/jquery/corner/
Spent a lot of time hoping for this one. The corners rounded sure enough, but I lost all borders. When I was able to "keep" my borders they didn't round. Which seemed a little anticlimactic to have the background image round but not the borders.

http://www.curvycorners.net/instructions/
Crazy instructions and disclaimers for inadequacy, although it did have the most documentation (more is not always better). I gave up after it repositioned my absolutely positioned internal object.

http://www.dillerdesign.com/experiment/DD_roundies/
Came the closest but still repositioned internal objects. Not by much but they moved several pixels to the right and down. This made it inconsistent with the other browsers and would require separate css to compensate.

Conclusion: I decided for my work case that I was just better off creating a custom jquery script that dropped the corner images in if the user is running IE. I love the CSS3 corners that firefox and webkit implement. My solution is not elegant but it keeps excess html out of my layout and these images will cover IE until they get their act together.

1 comment: