by Christian Cantrell

 Comments (10)

Created

March 31, 2005

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; overflow: hidden; background: #ddd}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

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.

COMMENTS

  • By Vesa - 3:01 PM on March 31, 2005   Reply

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

  • By Jack Smith - 3:16 PM on March 31, 2005   Reply

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

  • By Simeon - 4:07 PM on March 31, 2005   Reply

    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.

  • By Roland Collins - 4:23 PM on March 31, 2005   Reply

    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.

  • By tony of the weeg clan - 4:25 PM on March 31, 2005   Reply

    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

  • By John Waller - 6:36 PM on March 31, 2005   Reply

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

  • By John Waller - 6:37 PM on March 31, 2005   Reply

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

  • By Anthony - 2:01 AM on April 1, 2005   Reply

    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.

  • By John Dowdell - 6:43 PM on April 1, 2005   Reply

    “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’…. ;-)

  • By Scott Rosa - 2:20 PM on December 20, 2005   Reply

    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

ADD A COMMENT