HTML and CSS Reference
In-Depth Information
Because the same border is used on all sides, an alternative way of specifying the fallback color and
translucent borders is to use the
border
shorthand for both:
border: rgb(217,79,17) 15px solid;
border: rgba(217,79,17,0.6) 15px solid;
This combination produces a translucent border in a modern browser and an opaque one in an older
browser.
■
The style for the fallback color must come first. Although you can use the individual border properties
listed in Table
9-1
for the fallback color, you must use one of the shorthand properties in Table
9-2
for the
rgba()
or
hsla()
version. if you use individual properties for both, older browsers ignore both styles.
Note
Getting Rid of Borders Around Image Links and Image Maps
In the early days of the Web, using images as links was a novel idea. So, browsers automatically added a blue
border around image links to indicate they were clickable. However, using images as links is now commonplace,
and the blue border tends to destroy the visual harmony of the page. As a result, most browsers no longer add a
blue border. However, older browsers do, as does IE 9. Some browsers also add a border around image maps—
images with hotspots defined in a
<map>
element that act as links.
The old-school way of eliminating these borders was to add
border=
"0"
in each
<img>
tag. However, this is
invalid in HTML5. Moreover, it's much more efficient to add the following rule to your style sheet:
a img, img["usemap"] {
border: none;
}
This is a group selector that targets images nested inside
<a>
tags or that are linked to an image map with the
usemap
attribute. One simple rule that removes all borders around image links and image maps.
Preventing Borders and Backgrounds from Extending Under Floats
When you add a border and/or background to an element, it stretches underneath any element floated alongside.
This is because only the content is displaced by the float. Figure
9-5
shows what happens when a
<div>
with a
background and border moves up alongside a floated image in border_float.html.
