- A Bright Future with CSS3 Bling
- border-radius: God Bless Those Rounded Corners
- Adding Depth with box-shadow
- Bring the Bling with CSS Gradients
- Multiple Backgrounds
- Box Clever: border-image
- box-decoration-break
- Adding Bling to a Banner Ad
- Wrapping Up
This chapter is from the book
This chapter is from the book
This chapter is from the book
border-radius: God Bless Those Rounded Corners
Rounded corners are vital for street cred, critical for keeping with the Web 2.0 cool school, and essential if you want to impress your significant other.
These elements are such a commonly requested design feature that the spec writers added the border-radius property to the Borders and Backgrounds module (www.w3.org/TR/css3-background). The syntax is very simple to use (see border-radius-examples.html in the code download for many examples). You can specify a single value for the radius size of all the rounded corners. For example:
border-radius: 10px;
You can use pixels or any other CSS unit that makes sense. The preceding line of code results in corners like those in Figure 4.1.
){kind=link}
Figure 4.1 A simple container with equally rounded corners.
As you’d logically expect, you can also specify two, three, or four values. For example:
- border-radius: 0px 0px 20px 20px; These relate to top-left, top-right, bottom-right, and bottom-left values, respectively.
- border-radius: 0px 10px 20px; These relate to the top-left value, top-right and bottom-left, and bottom-right values, respectively.
- border-radius: 10px 20px; These relate to the top-left and bottom-right, and top-right and bottom-left values, respectively.
- A couple of examples are shown in Figure 4.2.
)
Figure 4.2The container on the left has four values set; the one on the right has two values set. I’ve not included a three-value example, because I find it a bit pointless.
Using border-radius, you can also specify two sets of values separated by a forward slash to indicate separate horizontal and vertical corner radii. For example, the following line sets every horizontal radius to 10px and every vertical radius to 20px (Figure 4.3):
){kind=link}
border-radius: 10px/20px;
Figure 4.3 Setting different horizontal and vertical radii on a container.
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.
)
Figure 4.4 Specifying the horizontal and vertical radii separately.
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:
behavior: url(path/to/PIE.htc);
The easiest way to do this for the border-radius-examples.html file was to just apply this line to all <div>s, which works well even though the actual border-radius properties are applied via different classes on the different <div>s:
div {
...
behavior: url(PIE.htc);
}
NOTE
I tried applying the PIE behavior property to all elements on a complex site using * { behavior: url(PIE.htc); }, but it resulted in some very weird behavior, so it’s best not to try this strategy. The * selector is expensive to render anyway, at the best of times.
The path you specify to the PIE.htc file must be relative to the HTML file the CSS is applied to, not the CSS, if you are using an external CSS file. This sounds very odd, but it is due to the way HTC file works: It alters the behavior of the CSS after it is applied to the HTML!
The other major part of using the CSS3PIE technique comes when you use it to add support for gradients. To do so, you need to add a special -pie- prefixed version of the property. For example:
-pie-background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.2));
You’ll notice that when using the -pie- prefix on a gradient, the prefix is put on background, not linear-gradient, which is where the vendor prefixes would go.
There is an added complication: the limitation of CSS3PIE’s RGBA support. You see, CSS3PIE will add support, but it won’t render the alpha bit. Instead, it will drop the alpha channel and render the equivalent RGB color. This is certainly better than nothing and is probably not disastrous in many situations, but it could also cause content to be rendered unreadable or just look shocking, especially if you’re relying on a color with a low alpha value to just add a faint shadow or tint to a container on your page. To remedy this problem, it is a good idea to change the -pie- prefixed version of the property to a sensible fallback color or even remove it in some situations:
-pie-background: linear-gradient(#ff0000,#A60000);