Scott Schiller has a pretty good tutorial on creating rounded corners in CSS. As he says in his post, a lot of people developing Web 2.0 and/or AJAX web applications have created layouts utilizing rounded corners.
Schiller makes some very valid points initially stating what he wanted to do and how he wanted to accomplish the task. First he wanted to keep the XHTML as lean as possible and with this it meant that there would be no inline images for presentation. He also wanted to overcome fixed width and height to allow for fluid and scalable layouts. The more JavaScript used the slower an application becomes. Keeping that for core AJAX application utilities would be more important than a slick layout. Of course his last rule of thumb, which is widely accepted by most XHTML/CSS developers, is to not use tables for layout.
He wanted to create a fluid box model without using JavaScript, inline images, or CSS hacks. For his tutorial he uses the sliding doors method for creating his rounded corner box. He divides the box into header, body, and footer, and just keeps the layout nice and simple.
Since he uses PNGs for transparency, IE 6 is does not fully support it. He suggests downgrading to GIF images. IE 7 should fix the PNG transparency errors. I guess he could have used the PNG hack but I supposed he was trying to eliminate all hacks and JavaScript. I guess he would have to use JavaScript anyway to test for IE 6 or other browsers.
Overall, it’s a great tutorial to try out on your Web 2.0 applications. It’s pretty clean and straightforward so I don’t think I would be hard for most users to implement.
