HTML and CSS Reference
In-Depth Information
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
Search WWH ::

Custom Search