CSS Property - Border
Value: <border-width> || <border-style> || <color>
Initial: not defined for shorthand properties
Applies to: all elements
Inherited: no
Percentage values: N/A
The "border" property is a shorthand property for setting the same width, color and style on all four borders of an element.
Values that can be used for the "border" property are set and restricted to the values from the individual border properties.
Example:
p{
border-top: solid #000000;
border-right: solid #000000;
border-bottom: solid #000000;
border-left: solid #000000;
}
Short Form:
p{
border: solid #000000;
}
The "border" property cannot set different values for all borders. If you wish to set different values for each or single borders then the other border properties need to be used.
Since the properties to some extent have overlapping functionality, the order in which the rules are specified becomes important.
Example:
p{
border-left: 2px;
border-color: #000000;
color: #CCCCCCC;
}
In the above example, the color of the left border will be grey, while the other borders are black. This is due to "border-left" setting the width, style and color. Since the color value is not specified on the "border-left" property, it will be taken from the "color" property.
Note that while the "border-width" property accepts up to four length values, this property only accepts one.