HTML and CSS Reference
In-Depth Information
■
Caution
The
border
shorthand property resets omitted values to their defaults.
Setting a Fallback Border Color for Alpha Transparency
As noted earlier, IE 6-8 don't support the
rgba()
,
hsl()
, or
hsla()
color formats. For cross-browser
compatibility, it's best to avoid
hsl()
altogether when setting border colors. But if you want to use alpha
transparency in a border, you can set an opaque fallback color first followed by a shorthand property that uses
rgba()
or
hsla()
. For example, border_alpha.html contains a
<div>
that's styled like this:
#description {
width: 300px;
padding: 5px 10px;
margin-left: 30px;
background-color: #FFF;
background: rgba(255,255,255, 0.9);
background-clip: padding-box;
border: 15px solid;
border-color: rgb(217,79,17);
border-color: rgba(217,79,17,0.6);
}
As Figure
9-4
shows, a browser that understands
rgba()
uses the second
border-color
declaration, allowing
the background image to show through. Note also that
background-clip
has been set to
padding-box
. This is
necessary to prevent the background color from extending under the border.
Figure 9-4.
The background image is visible through the translucent border
