Christian Cantrell

My pal Ben Simon sent me this URL a while ago that describes a technique for creating rounded corners using just CSS and no images. Check out Nifty Corners for the full scoop. Hopefully you are looking at an example right now, unless it doesn't work in your browser for some reason (I haven't done extensive testing). If it doesn't work, leave a comment here so people will know the compatibility limitations.

Update: I have no idea why this wouldn't work in IE. An isolated version of the code works fine as do the examples. I suspect it's just buggy IE rendering, but if anyone can figure out why it's not working, and can suggest a fix, I will publicly shower him or her with praise.

I seen following examples an year ago (it's not so new thing), as far FireFox supports that "technique"..

works fine for me.

Its interesting, any news on how big the file size is? Probably bigger than using a gif!

This looks similair to what Sean Corfield used last week to redisign his blog. Regardless, I think its great to see people taking advantage of css and starting to think about less traditional solutions to problems.

It doesn't render properly in IE! I see 3 horizontal lines that are spaced one pixel apart vertically. If they were squeezed together, they would look right.

Sean's corners appear fine in IE.

i think its cool as heck, however, the edges on the rounded areas is kinda scraggy... cant really see it here, but you can on sean's blog.

tw

IE6: I see the same as Roland
i.e. 3 horizontal lines that are spaced one pixel apart vertically. If they were squeezed together, they would look right.

IE6: I see the same as Roland
i.e. 3 horizontal lines that are spaced one pixel apart vertically. If they were squeezed together, they would look right.

I'm seeing the same thing. I also have this setup on my blog and it looks fine, as does Sean's site. My guess is that some css rule you have is causing a problem. do you have any rules for the b tag? I'm IE6 too.

"I have no idea why this wouldn't work in IE...."

I recently read of something that might help... there's this thing called "AJaX", see, an' what it does is make things like this easier, see, an'.... ;-)

I needed to update one of our old websites, but I need to keep the look and feel pretty much the same as the old design. The old design used images to achieve a round effect around some links in the left hand navigation bar. I used the nifty corner technique to replace the images. It is not a perfect replacement for images, but it was close enough for me. The file size for the nifty javascript was only about 6kb, which was smaller than the images that I was using. And, it worked fine in IE and Firefox