Looking over the features and functions of the latest implementation of Cascading Style Sheets (CSS) makes me realize that so much of what we have done with CSS in the past was a miserable hack. Consider the time-honored (and perhaps overused) web design tradition of the rounded corner box…

Using the current CSS 2.x standard, if one wanted to create a variable width box with rounded corners one would have to create no fewer than six(!) nested DIV tags and several background images to achieve this. Here is a great old tutorial that shows you the hassles of this seemingly simple design technique: Rounded Corners with CSS2. This type of non-semantic coding, while effective in the short term, will always be problematic in the long run. So what are conscientious designers to do?

Well… that depends. More aggressive and adventurous designers could dive into CSS3 right now and have flawless, elegant rounded corners in the top, modern, standards-compliant browsers (Firefox3, Opera10, Safari4). Compare the following code and result to the rounded corner tutorial code above:

Pretty sweet, eh? Well, not so fast. That "border-radius" property is not yet universally available. It works great in Firefox and Safari, but you need to append the property with "-moz-" or "-webkit-" respectively. So, for now we need to sit tight until the browsers catch up fully with the standards set by the W3C. The good news is, the standards are there and ALL of the major browsers have sworn compliance. At some point… in the future. In other words folks, stay tuned.

Next time I will talk about HSL color values and alpha channels in CSS3. More awesome stuff we can code now and use later. Until then…