Learning Style Sheet Properties - Alphabetical Property Reference: Border
(Page 4 of 4 )
border
IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: No
This is a shorthand property for setting the width, style, and/or color of all four borders around an element in one assignment statement. Whichever properties you don’t explicitly set with this property assume their initial values. Numerous other properties allow you to set the width, style, and color of individual edges or groups of edges, if you don’t want all four edges to be the same.
Due to differences in the way browsers define their default behavior with regard to borders, every style sheet border rule should include the width and style settings. Failure to specify both properties may result in the border not being seen in one browser or the other.
CSS Syntax
border: border-width || border-style || color | transparent
Value
For the border-width and border-style property values, see the respective properties in this chapter. For details on the color value, see the section about colors at the beginning of this chapter.
Initial Value None.
Example p {border: 3px groove darkred}
Applies To
All elements, but only block and replaced elements in IE 4 and 5 for Windows.
Object Model Reference
[window.]document.getElementById("elementID ").style.border
border-bottom, border-left, border-right, border-top IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: No
All four properties are shorthand properties for setting the width, style, and/or color of a single border edge of an element in one assignment statement. Whichever properties you don’t explicitly set with this property assume their initial values.
CSS Syntax
border-bottom: border-bottom-width || border-bottom-style || color | transparent border-left: border-left-width || border-left-style || color | transparent
border-right: border-right-width || border-right-style || color | transparent
border-top: border-top-width || border-top-style || color | transparent
Value
For the width and style property values, see the border-bottom-width and border-bottom-style properties in this chapter. For details on the color value, see the section about colors at the beginning of this chapter.
Initial Value None.
Example
p {border-bottom: 3px solid lightgreen}
p {border-left: 6px solid lightgreen}
p {border-right: 3px solid lightgreen}
p {border-top: 6px solid lightgreen}
Applies To
All elements, but only block and replaced elements in IE 4 and 5 for Windows.
Object Model Reference
[window.]document.getElementById("elementID").style.borderBottom
[window.]document.getElementById("elementID").style.borderLeft
[window.]document.getElementById("elementID").style.borderRight
[window.]document.getElementById("elementID").style.borderTop
border-bottom-color, border-left-color, border-right-color, border-top-color
IE 4 NN n/a Moz all Saf all Op all CSS 2
Inherited: No
Each property sets the color of a single border edge of an element. This power is easy to abuse by mixing colors that don’t belong together. See also the border-color property for setting the color of multiple edges in one statement.
border-bottom-style, border-left-style, border-right-style, border-top-style
CSS Syntax
border-bottom-color: color | transparent border-left-color: color | transparent border-right-color: color | transparent border-top-color: color | transparent
Value
For details on the color value, see the section about colors at the beginning of this chapter. Also transparent.
Initial Value None.
Example
p {border-bottom-color: gray}
div {border-left-color: #33c088}
p.special {border-right-color: rgb(150, 75, 0)}
h3 {border-top-color: rgb(100%, 50%, 21%)}
Applies To
All elements, but only block and replaced elements in IE 4 and 5 for Windows.
Object Model Reference
[window.]document.getElementById("elementID").style.borderBottomColor [window.]document.getElementById("elementID").style.borderLeftColor [window.]document.getElementById("elementID").style.borderRightColor [window.]document.getElementById("elementID").style.borderTopColor
border-bottom-style, border-left-style, border-right-style, border-top-style
IE 4 NN n/a Moz all Saf all Op all CSS 2
Inherited: No
Each property sets the line style of a single border edge of an element. The edge-specific properties let you override a style that has been applied to all four edges with the border or border-style properties, but the edge-specific setting must come after the other one (in source code order) in the style sheet rule. See also the border-style property for setting the style of multiple edges in one statement.
CSS Syntax
border-bottom-style: style
border-left-style: style
border-right-style: style
border-top-style: style
border-bottom-width, border-left-width, border-right-width, border-top-width
Value
Style values are constants that are associated with specific ways of rendering border lines. Not all browser versions recognize all of the values in the CSS recommendation. Style support is shown in the following table.
| Value | IE/Windows | NN | Others | CSS |
|---|
| dashed | 5.5 | 6 | all | 1 |
|---|
| dotted | 5.5 | 6 | all | 1 |
|---|
| double | 4 | 4 | all | 1 |
|---|
| groove | 4 | 4 | all | 1 |
|---|
| hidden | n/a | 6 | all | 2 |
|---|
| inset | 4 | 4 | all | 1 |
|---|
| none | 4 | 4 | all | 1 |
|---|
| outset | 4 | 4 | all | 1 |
|---|
| ridge | 4 | 4 | all | 1 |
|---|
| solid | 4 | 4 | all | 1 |
|---|
The manner in which browsers interpret the definitions of the style values is not universal. Figure 4-1 shows a gallery of all styles as rendered by Internet Explorer, Firefox, Safari, and Opera 9. Don’t expect the same look in all browsers.
Initial Value none
Example
p {border-style: solid; border-bottom-style: none}
div {border-left-style: ridge}
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID").style.borderBottomStyle [window.]document.getElementById("elementID").style.borderLeftStyle [window.]document.getElementById("elementID").style.borderRightStyle [window.]document.getElementById("elementID").style.borderTopStyle
border-bottom-width, border-left-width, border-right-width, border-top-width
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: No
Each property sets the width of a single border edge of an element. See also the border-width property for setting the width of multiple edges in one statement.
Please check back next week for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
