Perhaps the most empowering point of note is that there is no penalty in older browsers for including properties that they do not understand. Older browsers (including Internet Explorer 6, 7, and 8) will happily skip over CSS3 properties that they can't process. This gives us the ability to progressively enhance areas of a design for the better-equipped browsers, whilst ensuring a reasonable fall back for the older ones.

Let's consider a common design hurdle we all face on most projects—to create a rounded corner on a screen element, perhaps for a tabbed interface or corner of a boxed element such as a header for example. Using CSS 2.1 this could be achieved by using a sliding doors technique (http://www.alistapart.com/articles/slidingdoors/), whereby one background image sits behind another. The HTML could look as simple as this:

<a href="#"><span>Box Title</span></a>

We add a rounded background to the <a> element by creating two images. The first, called headerLeft.png , would be 15 pixels wide and 40 pixels high and the second, called headerRight.png in this example, would be made wider than we would ever anticipate the header being (280 pixels, here). Each would be one half of the "sliding door". As one element grows (the text within our <span> tags), the background fills the space creating a somewhat future proof rounded corner solution. Here is how the CSS in this example looks:

a {
  display: block;
  height: 40px;
  float: left;
  font-size: 1.2em;
  padding-right: 0.8em;
  background: url(images/headerRight.png) no-repeat scroll top right;
}
a span {
  background: url(images/headerLeft.png) no-repeat;
  display: block;
  line-height: 40px;
  padding-left: 0.8em;
}

The following screenshot shows how it looks in Google's Chrome (v16):

It solves the design problem but requires additional markup (semantically the <span> element has no value) and two additional HTTP requests (for the images) to the server to create the onscreen effect. Now, we could combine the two images into one to create a sprite and then use the background-position: CSS property to shift it around but even with the bandwidth economies that provides, it's still an inflexible solution. What happens if the client decides they want the corners to have a tighter radius? Or a different color? We'd need to re-make our image(s) again. Sadly, until CSS3, this has been the reality of the situation we, as frontend designers and developers have found ourselves in. Ladies and gentleman, I've seen the future, and it's CSS3 shaped! Let's revise the HTML to be only:

<a href="#">Box Title</a>

And, to begin with, the CSS can become the following:

a {
  float: left;
  height: 40px;
  line-height: 40px;
  padding-left: 0.8em;
  padding-right: 0.8em; 
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  background-image: url(images/headerTiny.png);
  background-repeat: repeat-x;
}

The following screenshot shows how the CSS3 version of the button looks in the same browser (Chrome v16):

In this example, the two previous images have been substituted for a single 1 pixel-wide image that is repeated along the x-axis. Although the image is only 1 pixel wide, it is 40 pixels high, hopefully higher than any contents that will be inserted. When using an image as a background, it's always necessary to "overshoot" the height, in anticipation of content overflowing, which sadly makes for bigger images and greater bandwidth requirements. Here, however, unlike the entirely image-based solution, CSS3 takes care of the corners for us with the border-radius and related properties. Client wants the corners to be a little rounder, say 12 pixels? No problem, just amend the border-radius property to 12px and your work is done. The CSS3 rounded corners property is fast, flexible, and supported in Safari (v3+), Firefox (v1+), Opera (v10.5+), Chrome (v3+), and Internet Explorer 9. Microsoft are so excited about IE 9's support of the feature that (I hope you feel my slight sarcasm seeping through here) they have even designed an interactive page demonstrating the various effects that can be achieved with the border-radius property . View this demonstration at the following URL:

http://ie.microsoft.com/testdrive/html5/borderradius/default.html

CSS3 can take things further by eliminating the need for a gradient background image by producing the effect in the browser instead. This property isn't as well supported but with something along the lines of linear-gradient(yellow, blue), the background of any element can enjoy a CSS3 generated gradient.

The gradient can be specified in solid colors, traditional HEX values (for example, #BFBFBF) or using one of the CSS3 color modes (more on these in Chapter 5, CSS3: Selectors, Typography, and Color Modes). If you're happy for users of older browsers to see a solid background instead of a gradient (as opposed to nothing), a CSS stack something like this would provide a solid color in the event of the browser being unable to handle the gradient:

background-color: #42c264;  
background-image: -webkit-linear-gradient(#4fec50, #42c264);
background-image: -moz-linear-gradient(#4fec50, #42c264);
background-image: -o-linear-gradient(#4fec50, #42c264);
background-image: -ms-linear-gradient(#4fec50, #42c264);
background-image: -chrome-linear-gradient(#4fec50, #42c264);
background-image: linear-gradient(#4fec50, #42c264);

The linear-gradient property instructs the browser to start with the first color value (#4fec50, in this example) and move to the second color value (#42c264).

You'll notice that in the CSS code, the background-image linear-gradient property has been repeated with a number of prefixes; for example, -webkit-. This allows different browser vendors (for example, -moz- for Mozilla Firefox, -ms- for Microsoft Internet Explorer, and so on) to experiment with their own implementation of the new CSS3 properties before introducing the finished article, at which point the prefixes are unneeded. As stylesheets by their nature cascade, we place the un-prefixed version last, meaning it will supersede the earlier declarations if available.