Rounded Corners Using CSS

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.

10 Responses to Rounded Corners Using CSS

  1. Vesa says:

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

  2. Jack Smith says:

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

  3. Simeon says:

    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.

  4. Roland Collins says:

    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.

  5. 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

  6. John Waller says:

    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.

  7. John Waller says:

    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.

  8. Anthony says:

    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.

  9. John Dowdell says:

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

  10. Scott Rosa says:

    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