Property: |
border |
Values: |
<border-width>, <border-style>, <color> |
Initial: |
not defined for shorthand properties |
Inherited: |
no |
A D V E R T I S E M E N T
The 'border' property is a shorthand property for setting the same width,
color and style on all four borders of an element. For example, the first rule
below is equivalent to the set of four rules shown after it:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
|
Unlike the shorthand 'margin' and 'padding' properties, the 'border' property
cannot set different values on the four borders. To do so, one or more of the
other border properties must be used.
Since the properties to some extent have overlapping functionality, the order
in which the rules are specified becomes important. Consider this example:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
|
In the above example, the color of the left border will be black, while the
other borders are red. 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. The fact that the 'color' property is
set after the 'border-left' property is not relevant.
Note that while the 'border-width' property accepts up to four length values,
this property only accepts one.
Property: |
border-bottom |
Values: |
<border-bottom-width>, <border-style>, <color> |
Initial: |
not defined for shorthand properties |
Inherited: |
no |
This is a shorthand property for setting the width, style and color of an
element's bottom border. Otherwise it is equivalent to the
'border-top'.
Property: |
border-bottom-width |
Values: |
thin, medium, thick, <length> |
Initial: |
'medium' |
Inherited: |
no |
This property sets the width of an element's bottom border. Otherwise it is
equivalent to the
'border-top-width'.
Property: |
border-color |
Values: |
<color> |
Initial: |
the value of the 'color' property |
Inherited: |
no |
The 'border-color' property sets the color of the four borders.
'border-color' can have from one to four values, and the values are set on the
different sides as for 'border-width' above.
If no color value is specified, the value of the 'color' property of the
element itself will take its place:
| P {
color: black;
background: white;
border: solid;
}
|
In the above example, the border will be a solid black line.
Property: | border-left |
Values: | <border-left-width>, <border-style>, <color> |
Initial: | not defined for shorthand properties |
Inherited: | no | This is a shorthand property for setting the width, style and color of an
element's left border. Otherwise it is equivalent to the
'border-top'.
Property: | border-left-width |
Values: | thin, medium, thick, <length> |
Initial: | 'medium' |
Inherited: | no | This property sets the width of an element's left border. Otherwise it is
equivalent to the
'border-top-width'.
Property: | border-right |
Values: | <border-right-width>, <border-style>, <color> |
Initial: | not defined for shorthand properties |
Inherited: | no | This is a shorthand property for setting the width, style and color of an
element's right border. Otherwise it is equivalent to the
'border-top'.
Property: | border-right-width |
Values: | thin, medium, thick, <length> |
Initial: | 'medium' |
Inherited: | no | This property sets the width of an element's right border. Otherwise it is
equivalent to the
'border-top-width'.
Property: | border-style |
Values: | none, dotted, dashed, solid, double, groove, ridge,
inset, outset |
Initial: | none |
Inherited: | no | The 'border-style' property sets the style of the four borders. It can have
from one to four values, and the values are set on the different sides as for
'border-width' above.
#xy34 { border-style: solid dotted }
In the above example, the horizontal borders will be 'solid' and the vertical
borders will be 'dotted'.
Since the initial value of the border styles is 'none', no borders will be
visible unless the border style is set.
The border styles mean:
- none
- no border is drawn (regardless of the 'border-width' value)
- dotted
- the border is a dotted line drawn on top of the background of the
element
- dashed
- the border is a dashed line drawn on top of the background of the
element
- solid
- the border is a solid line
- double
- the border is a double line drawn on top of the background of the
element. The sum of the two single lines and the space between equals the
<border-width> value.
- groove
- a 3D groove is drawn in colors based on the <color> value.
- ridge
- a 3D ridge is drawn in colors based on the <color> value.
- inset
- a 3D inset is drawn in colors based on the <color> value.
- outset
- a 3D outset is drawn in colors based on the <color> value.
CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double',
'groove', 'ridge', 'inset' and 'outset' as 'solid'.
Property: | border-top |
Values: | <border-top-width>, <border-style>, <color> |
Initial: | not defined for shorthand properties |
Inherited: | no | This is a shorthand property for setting the width, style and color of an
element's top border.
H1 { border-bottom: thick solid red }
The above rule will set the width, style and color of the border below the H1
element. Omitted values will be set to their initial values:
H1 { border-bottom: thick solid }
Since the color value is omitted in the example above, the border color will
be the same as the 'color' value of the element itself.
Note that while the 'border-style' property accepts up to four values, this
property only accepts one style value.
|
