HTML and CSS Reference
FIGURE 4.4 Specifying the
horizontal and vertical radii
The x and y values can follow the same rules as the single set of values you saw
in the first couple of examples. You can set a different value for each radius, like this:
border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;
Or, you can set separate values for the horizontal radii and one value for all
four vertical radii:
border-radius: 10px 20px 30px 40px/30px;
These examples produce the results shown in Figure 4.4 .
ADDING SUPPORT FOR OLDER BROWSERS: CSS3PIE!
All modern browsers support rounded corners, but older versions of IE, of course,
don't. So what can you do here? The simple answer in this case is to use CSS3PIE,
which you first looked at in Chapter 2. You can download CSS3PIE from http://
css3pie.com. Unzip the file and save PIE.htc to your working directory.
Next, you need to apply the following property line to all elements in your CSS
that use properties you want to add support for: