Borders and More with Style Sheets
(Page 1 of 4 )
If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the third part of a series, covers borders, bottom edges, and more. It is excerpted from chapter four of
Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Alphabetical Property Reference: Border continued
border-bottom-width, border-left-width, border-right-width, border-top-width
Figure 4-1. Border-style gallery
CSS Syntax
border-bottom-width: thin | medium | thick | length
border-left-width: thin | medium | thick | length
border-right-width: thin | medium | thick | length
border-top-width: thin | medium | thick | length
Value
Three constants—thin | medium | thick —allow the browser to define how many pixels are used to show the border. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter).
Initial Value medium
Example
h2 {border-bottom-width: 2px}
div {border-left-width: thin}
p.special {border-right-width: 0.5em}
border-collapse
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.borderBottomWidth [window.]document.getElementById("elementID").style.borderLeftWidth [window.]document.getElementById("elementID").style.borderRightWidth [window.]document.getElementById("elementID").style.borderTopWidth
border-collapse
IE 5(Win) NN n/a Moz all Saf all Op all CSS 2
Inherited: Yes
Sets whether borders of adjacent table elements (cells, row groups, column groups) are rendered separately or collapsed (merged) to ignore any padding or margins between adja cent borders. A table set to the separate border model may also have its border-spacing and empty-cells style properties set (if supported by the target browsers).
CSS Syntax
border-collapse: collapse | separate.
Value Constant values: collapse | separate.
Initial Value separat e
Applies To The table element .
border-color
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: No
This is a shortcut property that lets you set multiple border edges to the same or different colors. Navigator 4 allows only a single value, which applies to all four edges. For other supporting browsers, you may supply one to four space-delimited color values. The number of values determines which sides receive the assigned colors.
CSS Syntax
border-color: color {1,4}
Value
For modern browsers, this property accepts one, two, three, or four color values, depending on how many and which borders you want to set with specific colors. Value quantities and positions are interpreted as shown in the following table.
border-spacing
| |
|---|
| Number of values | Effect |
|---|
| 1 | All four borders set to value |
|---|
| 2 | Top and bottom borders set to the first value, right and left borders set to the second value |
|---|
| 3 | Top border set to first value, right and left borders set to second value, bottom border set to third value |
|---|
| 4 | Top, right, bottom, and left borders set, respectively |
|---|
Initial Value
The element’s color style property (which is inherited if not specifically assigned for the element).
Example
h2 {border-color: red blue red}
div {border-color: red rgb(0,0,255) red}
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.borderColor
border-spacing
IE n/a NN n/a Moz all Saf all Op all CSS 2
Inherited: No
Determines the size of the space (if any) between all cell borders in a table. This property requires that the border-collapse property be set to separate (which is typically the default value). If you include only one length value, it applies to both the horizontal and vertical cell spacing; for two values, the first applies to the horizontal and the second to the vertical. See Figure 4-2 for a synopsis of a table’s numerous dimension definitions.
Figure 4-2. The geometry of a table element
CSS Syntax
border-spacing: length[length]
border-style
Value
See the discussion of length values at the beginning of this chapter. If you want no spacing along one axis, set its value to zero.
Initial Value 0
Applies To The table element.
border-style
IE 4 NN 4 Moz all Saf all Op all CSS 1
Inherited: No
This is a shortcut property that lets you set multiple border edges to the same or different style. For mainstream browsers, you may supply one to four space-delimited border style values. The number of values determines which sides receive the assigned style.
CSS Syntax
border-style: borderStyle {1,4}
Value
Style values are constants that are associated with specific ways of rendering border lines. See border-bottom-style for a list of available values.
The precise manner in which browsers interpret the definitions of the style values is far from universal. Figure 4-1 shows a gallery of all styles as rendered by Internet Explorer 7, Firefox, Safari, and Opera 9. Do not expect the exact same look in all browsers.
This property accepts one, two, three, or four space-delimited borderStyle values, depending on how many and which borders you want to set with specific styles. Value quantities and positions are interpreted as shown in the following table.
Number of values | Effect |
1 | All four borders set to value |
2 3 4 | Top and bottom borders set to the first value, right and left borders set to the second value Top border set to first value, right and left borders set to second value, bottom border set to third value Top, right, bottom, and left borders set, respectively |
Initial Value none
Example
h1 {border-style: ridge; border-width: 3px} div {border-style: solid double; border-width: 4px}
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.borderStyle
Next: Even More on Borders >>
More DHTML Articles
More By O'Reilly Media
|
 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.
|
|
