Rounded Corners

I was asked to put some content inside a box shaped element which had rounded corners. Not square corners, it had to have rounded corners.

Unfortunately, since HTML is so 'boxy' this behaviour does not come naturally. It's not just a setting on your table or div element, and there's no particularly easy way to achieve this effect.

Until CSS3 and its border-radius property comes into play in all of the next generation browsers, creating a screen element with rounded corners needs to be done another way. More info on border-radius and browser support is available on CSS3.info.

I found that the effect can be achieved using images and divs. There's a nice article on the Webcredible site which gives you a step by step tutorial on exactly how to do it.

N.B: Being honest, you can actually use browser specific properties such as '-moz-border-radius' to display rounded corners, but I couldn't find the equivalent for IE which is no good since a large chunk of users will be using IE.