Rounded corners in CSS

I’ve been thinking about jumping on the rounded corners bandwagon recently, just to try something new. I’ve found a few sites out there that may help me out if I ever do make a layout with rounded corners, and I didn’t know that there were so many resources for this out there!

Kalsey Consulting Group’s easy rounded corners – The easiest way to create rounded corners. Just slice up an image, save the corners, and plug them in! Instant rounded corner gratification!’s Bullet-Proof Rounded Corners – Another example of rounded corners, using a LOT more code than necessary. Still, I do like the fact that you can style the rounded corner box further (ie, putting a border around the box, as seen on the webpage). There’s an extra dot in the url between the S’s in ‘CSS’; take that out if you want to get to the right page!

A List Apart’s Custom Corners and Borders – The way I like the best, rounded-corners wise. The method for slicing up the image used for this, however, is fairly complicated at first, but well worth it after practicing a few times.

The Thrashbox – Ooh! Rounded corners with a different color at the top! Similar to A List Apart’s method, only taking the main slice from the bottom right instead of top left.

Virtuelvis’ Rounded Corners in CSS – The first site I came across that talked about rounded corners. This one focuses more on styling the blockquote element with rounded corners, though this method could also be applied to other elements as well.

Eric Meyer’s Rounding Tab Corners – A clean and easy way to make rounded tab corners.

Sova v Siti’s Rounded Corners – An example of creating rounded corners without using images. I’m not sure how this one is done, exactly…

The Imposter – A really nice site with lots of neat CSS tricks, including rounded corners using no graphics (it looks a bit funny in IE, however). I really need to look through this site more, as there would be a lot of things I would implement.