Learning Style Sheet Properties

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.

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

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.

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.