CSS1Home Properties BoxProperties Next Prev
The box properties set the size, circumference and position of the boxes that represent elements. See Chapter 2: CSS Formatting Model for examples on how to use the box properties.
The border properties set the borders of an element. Each element has four borders, one on each side, that are defined by their width, color and style.
|
Value
|
thin | medium | thick | <length> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-top" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0: Border properties turn inline elements into block elements. Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items |
|---|---|
|
Initial
|
medium |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property sets the width of an element's top border. The width of the keyword values are UA dependent, but the following holds: 'thin' <= 'medium' <= 'thick'.
The keyword widths are constant throughout a document:
|
H1 { border-width-top: thick } |
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To achieve relative widths, the 'em' unit can be used:
| H1 { border-top-width: 0.5em } |
Border widths cannot be negative.
Click C3_4_3_BoxBorderTopWidthEx1.htm to see examples.
|
Value
|
thin | medium | thick | <length> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-right" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0: Border properties turn inline elements into block elements. Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items |
|---|---|
|
Initial
|
medium |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property sets the width of an element's right border. The width of the keyword values are UA dependent, but the following holds: 'thin' <= 'medium' <= 'thick'.
The keyword widths are constant throughout a document:
|
H1 { border-width-right: thick } |
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To achieve relative widths, the 'em' unit can be used:
| H1 { border-right-width: 0.5em } |
Border widths cannot be negative.
Click C3_4_3_BoxBorderRightWidthEx1.htm to see examples.
|
Value
|
thin | medium | thick | <length> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-bottom" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0: Border properties turn inline elements into block elements. Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items |
|---|---|
|
Initial
|
medium |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property sets the width of an element's bottom border. The width of the keyword values are UA dependent, but the following holds: 'thin' <= 'medium' <= 'thick'.
The keyword widths are constant throughout a document:
|
H1 { border-width-bottom: thick } |
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To achieve relative widths, the 'em' unit can be used:
| H1 { border-bottom-width: 0.5em } |
Border widths cannot be negative.
Click C3_4_3_BoxBorderBottomWidthEx1.htm to see examples.
|
Value
|
thin | medium | thick | <length> Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-left" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0: Border properties turn inline elements into block elements. Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items |
|---|---|
|
Initial
|
medium |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property sets the width of an element's left border. The width of the keyword values are UA dependent, but the following holds: 'thin' <= 'medium' <= 'thick'.
The keyword widths are constant throughout a document:
|
H1 { border-width-left: thick } |
In the example above, 'H1' and 'P' elements will have the same border width regardless of font size. To achieve relative widths, the 'em' unit can be used:
| H1 { border-left-width: 0.5em } |
Border widths cannot be negative.
Click C3_4_3_BoxBorderLeftWidthEx1.htm to see examples.
|
Value
|
[thin | medium | thick | <length>]{1,4} Netscape 4.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0: Border properties turn inline elements into block elements. Border properties do not work (properly) with tables, table cells, form fields, hyperlinks, images, lists, and list items |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This property is a shorthand property for setting 'border-width-top', 'border-width-right', 'border-width-bottom' and 'border-width-left' at the same place in the style sheet.
There can be from one to four values, with the following interpretation:
In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:
|
H1 { border-width: thin } /* top-thin right-thin bottom-thin left-thin
*/ |
Border widths cannot be negative.
Click C3_4_3_BoxBorderWidthEx1.htm to see examples.
|
Value
|
<color> The color value can be a color name (red), a rgb value (rgb(255,0,0)),
or a hex number (#FF0000) Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-top" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
the value of the 'color' property |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-top-color property sets the color of an element's top border.
|
table { border-top-color: #ff3366 } table { border-top-color: rgb(255,0,0) } |
Click C3_4_3_BoxBorderTopColorEx1.htm to see examples.
|
Value
|
<color> The color value can be a color name (red), a rgb value (rgb(255,0,0)),
or a hex number (#FF0000) Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-right" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
the value of the 'color' property |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-right-color property sets the color of an element's right border.
|
table { border-right-color: #ff3366 } table { border-right-color: rgb(255,0,0) } |
Click C3_4_3_BoxBorderRightColorEx1.htm to see examples.
|
Value
|
<color> The color value can be a color name (red), a rgb value (rgb(255,0,0)),
or a hex number (#FF0000) Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-bottom" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
the value of the 'color' property |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-bottom-color property sets the color of an element's bottom border.
|
table { border-bottom-color: #ff3366 } table { border-bottom-color: rgb(255,0,0) } |
Click C3_4_3_BoxBorderBottomColorEx1.htm to see examples.
|
Value
|
<color> The color value can be a color name (red), a rgb value (rgb(255,0,0)),
or a hex number (#FF0000) Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if it is used alone. Use the "border-style" property to set the borders first or use the "border-left" property instead Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
the value of the 'color' property |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-left-color property sets the color of an element's left border.
|
table { border-left-color: #ff3366 } table { border-left-color: rgb(255,0,0) } |
Click C3_4_3_BoxBorderLeftColorEx1.htm to see examples.
|
Value
|
<color>{1,4} The color value can be a color name (red), a rgb value (rgb(255,0,0)),
or a hex number (#FF0000) Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0+, Netscape 7.0: This property is not recognized if
it is used alone. Use the "border" property to set the properties
for the borders Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Note in Netscape 4.0+: This property is not recognized. Use the "border" property to set the properties for the borders |
|---|---|
|
Initial
|
the value of the 'color' property |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
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 { |
In the above example, the border will be a solid black line.
There can be from one to four values, with the following interpretation:
In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:
|
H1 { border-color: red } /* top-red right-red bottom-red left-red */ |
Click C3_4_3_BoxBorderColorEx1.htm to see examples.
|
Value
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none : Defines no border. Netscape 6.0, Internet Explorer 4.0. hidden : The same as "none", except in border conflict resolution for table elements. Netscape 6.0 only. dotted : Defines a dotted border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. dashed : Defines a dashed border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. solid : Defines a solid border. Netscape 6.0, Internet Explorer 4.0. double: Defines two borders. The width of the two borders are the same as the border-width value. Netscape 6.0, Internet Explorer 4.0. groove : Defines a 3D grooved border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. ridge : Defines a 3D ridged border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. inset : Defines a 3D inset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. outset : Defines a 3D outset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-top-style property sets the style of an element's top border.
|
table { border-top-style: solid } |
Click C3_4_3_BoxBorderTopStyleEx1.htm to see examples.
|
Value
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none : Defines no border. Netscape 6.0, Internet Explorer 4.0. hidden : The same as "none", except in border conflict resolution for table elements. Netscape 6.0 only. dotted : Defines a dotted border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. dashed : Defines a dashed border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. solid : Defines a solid border. Netscape 6.0, Internet Explorer 4.0. double: Defines two borders. The width of the two borders are the same as the border-width value. Netscape 6.0, Internet Explorer 4.0. groove : Defines a 3D grooved border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. ridge : Defines a 3D ridged border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. inset : Defines a 3D inset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. outset : Defines a 3D outset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-right-style property sets the style of an element's right border.
|
table { border-right-style: solid } |
Click C3_4_3_BoxBorderRightStyleEx1.htm to see examples.
|
Value
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none : Defines no border. Netscape 6.0, Internet Explorer 4.0. hidden : The same as "none", except in border conflict resolution for table elements. Netscape 6.0 only. dotted : Defines a dotted border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. dashed : Defines a dashed border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. solid : Defines a solid border. Netscape 6.0, Internet Explorer 4.0. double: Defines two borders. The width of the two borders are the same as the border-width value. Netscape 6.0, Internet Explorer 4.0. groove : Defines a 3D grooved border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. ridge : Defines a 3D ridged border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. inset : Defines a 3D inset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. outset : Defines a 3D outset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-bottom-style property sets the style of an element's bottom border.
|
table { border-bottom-style: solid } |
Click C3_4_3_BoxBorderBottomStyleEx1.htm to see examples.
|
Value
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none : Defines no border. Netscape 6.0, Internet Explorer 4.0. hidden : The same as "none", except in border conflict resolution for table elements. Netscape 6.0 only. dotted : Defines a dotted border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. dashed : Defines a dashed border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. solid : Defines a solid border. Netscape 6.0, Internet Explorer 4.0. double: Defines two borders. The width of the two borders are the same as the border-width value. Netscape 6.0, Internet Explorer 4.0. groove : Defines a 3D grooved border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. ridge : Defines a 3D ridged border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. inset : Defines a 3D inset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. outset : Defines a 3D outset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The border-left-style property sets the style of an element's left border.
|
table { border-left-style: solid } |
Click C3_4_3_BoxBorderLeftStyleEx1.htm to see examples.
|
Value
|
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset none : Defines no border. Netscape 6.0, Internet Explorer 4.0. hidden : The same as "none", except in border conflict resolution for table elements. Netscape 6.0 only. dotted : Defines a dotted border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. dashed : Defines a dashed border. Renders as solid in most browsers. Netscape 6.0, Internet Explorer 5.5. solid : Defines a solid border. Netscape 6.0, Internet Explorer 4.0. double: Defines two borders. The width of the two borders are the same as the border-width value. Netscape 6.0, Internet Explorer 4.0. groove : Defines a 3D grooved border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. ridge : Defines a 3D ridged border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. inset : Defines a 3D inset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. outset : Defines a 3D outset border. The effect depends on the border-color value. Netscape 6.0, Internet Explorer 4.0. Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
none |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
The 'border-style' property sets the style of the four borders. 'border-style' 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.
There can be from one to four values, with the following interpretation:
In the examples below, the comments indicate the resulting widths of the top, right, bottom and left borders:
|
H1 { border-style: dotted } /* top-dotted right-dotted bottom-dotted
left-dotted */ |
CSS1 core: UAs may interpret all of 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' and 'outset' as 'solid'.
Click C3_4_3_BoxBorderStyleEx1.htm to see examples.
|
Value
|
<border-top-width> || <border-style> || <color> Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This is a shorthand property for setting the width, style and color of an element's top border.
|
H1 { border-top: 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-top: 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: While the 'border-style' property accepts up to four values, this property only accepts one style value.
Click C3_4_3_BoxBorderTopEx1.htm to see examples.
|
Value
|
<border-right-width> || <border-style> || <color> Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This is a shorthand property for setting the width, style and color of an element's right border.
|
H1 { border-right: 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-right: 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: While the 'border-style' property accepts up to four values, this property only accepts one style value.
Click C3_4_3_BoxBorderRightEx1.htm to see examples.
|
Value
|
<border-bottom-width> || <border-style> || <color> Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This is a shorthand property for setting the width, style and color of an element's bottom 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: While the 'border-style' property accepts up to four values, this property only accepts one style value.
Click C3_4_3_BoxBorderBottomEx1.htm to see examples.
|
Value
|
<border-left-width> || <border-style> || <color> Netscape 6.0, Internet Explorer 4.0 Note in IE 4.0-5.0: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements |
|---|---|
|
Initial
|
not defined for shorthand properties |
|
Applies to
|
all elements |
|
Inherited
|
no |
|
Percentage Values
|
N/A |
This is a shorthand property for setting the width, style and color of an element's left border.
|
H1 { border-left: 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-left: 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: While the 'border-style' property accepts up to four values, this property only accepts one style value.
Click C3_4_3_BoxBorderLeftEx1.htm to see examples.
|
Value
|
<border-width> || <border-style> || <color> Netscape 4.0, Internet Explorer 4.0 Notes in IE 4.0: This property does not work on check boxes and radio buttons. This property on list items moves the list item marker Note in IE 4.0+: This property does not work with inline elements Note in IE 5.5 Beta 1: This property works with inline elements Notes in Netscape 4.0:
|
|---|---|
|
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. For example, the first rule below is equivalent to the set of four rules shown after it:
|
P { border: 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 { |
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: while the 'border-width' property accepts up to four length values, this property only accepts one.
Click C3_4_3_BoxBorderEx1.htm to see examples.