Rounded corners and CSS

My intention with the squash ladder is to allow the layout to be completely customised by users via the use of cascading style sheets. The home page http://squash-ladder.net/home.php is based on a google blog template. I particularly like the clean simple look and the rounded corners on the boxes. I'd like to develop the rest of the ladder pages along the same lines and came across this really great trick which will help...

Rounded corners on boxes were not included in the CSS2 standard. They can of course be achieved by the use of tables and image files in html pages. If you like the idea of entirely defining layout within the CSS file then there are some approaches you can use.

CSS version 3 (CSS3) is likely to allow rounded corner boxes. Currently a mozilla specific method can be used as shown here: http://smhill.net/resources/css/rounded_corners/.

But guess what? This only works on Mozilla broswers i.e. NOT Internet Explorer. There is a good summary of the various techniques for creating CSS rounded boxes here: http://css-discuss.incutio.com/?page=RoundedCorners . The general rule is that a combination of boxes is used and a quarter circle graphic is used in each corner to round it off.

OK. That's fine but I'm after a fully customisable layout so that users can change colours. I would need to have a set of corner .gifs for every conceivable colour change.

An alternative technique that impressed me is described in the CSS Experiments site http://www.markschenk.com/cssexp/ . It uses a bullet point carefully placed in each corner of the box to round it. Quite smart but rather complicated coding and it fails to a certain extent in non-opera browsers (although seems to look good to me in firefox v1). The output can be viewed here http://www.markschenk.com/cssexp/roundedbox/arrows.html .

I finally came across what seems to be the perfect solution on the HardGrok Cafe http://www.hardgrok.org/blog/item/20?replyto=13 . It uses the same 4 corner graphics as before but what is exceptionally clever is that it generates the gifs on the fly via a php script called from the css file. e.g.

This is perfect! It does of course require the GD image library to be installed on PHP but most servers have this. It's also perhaps a tad slower in execution due to the extra server work but for a low traffic site like mine that's no big deal. Furthermore there's an option to cache the output so the same gifs will essentially be served as files rather than have to be regenerated. The author Raefer Gabriel has called it PHPCorners and it's free to download under a BSD-style license.