HTML Ref » Reference » Appendix B

home » reference » appendix b » css1 / css2 properties

border

This property defines the width, style, and color for all four sides of an element's border in a shorthand form. There are five specific properties for setting the width of borders: border-top-width, border-bottom-width, border-right-width, border-left-width, and border-width. The first four set the width of specific borders; border-width is used to set all four. The border property by itself can set all of them. Values for border widths can be set in numeric measurements or with the named values thin, medium, or thick. Border colors and styles can be set with the properties border-color and border-style, respectively, as well as with the shorthand. The properties border-top, border-bottom, border-right, and border-left can be used to set width, style, and color values for different sides of a border. Given all these properties, the border property sets the width, style, and color of all sides of an element's border, typically in that order. The syntax is shown here:

border: border-width border-style border-color;

Given the complexity of the rule, like many shorthand properties, individual properties should probably be set and then condensed to shorthand form.

Examples

div {border: 2px double red;}
.dashed {border: .5em dashed #f00;}

Browser and CSS Support Notes

CSS1, IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

border-bottom

This property defines the width, style, and color for the bottom border of an element in a shorthand form. The syntax for the rules should be in order, as follows:

border-bottom: border-width border-style border-color;

Given that CSS1 did not support border-bottom-color and border-bottom-style, this property is useful for setting the characteristics of the bottom of boxes for older browsers.

Example

#redbottom {border-top: thin solid red;}

Browser and CSS Support Notes

CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7

border-bottom-color

This property defines the color of an element's bottom border. See Appendix E for information on browser support of color values.

Example

p {border-style: solid; border-width: thin; border-bottom-color: orange;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-bottom-style

This property defines the style for the bottom border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style.

Example

#box {border-width: 10px; border-style: solid; border-bottom-style: double;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-bottom-width

This property sets the width of an element's bottom border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on.

Examples

.low {border-bottom-width: thick;}
p {border-bottom-width: 15px;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

border-collapse

This CSS2 property defines if table cell borders are connected or separate. Allowed values are separate and collapse. With a value of collapse, the borders appear to collapse on each other so that there's no more spacing between the borders. A rendering here in Internet Explorer 6 should illustrate the idea of the property.

Example

<table border="1" style="border-collapse: collapse;">
<tr>
<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td><td></td><td>Cell 5</td>
</tr>
</table>

Browser and CSS Support Notes

CSS2
IE 5, 5.5, 6 (buggy)
Nav 6, 7
Opera 5, 6, 7
TIP There are significant rendering differences in browsers even when the border-collapse property is supported.

border-color

This property defines the color of an element's border. All borders are set at once but individual color values can be set with the shorthand border-top, border-right, border-bottom, and border-left. See Appendix E for information on browser support of color values.

Examples

p {border-style: solid; border-width: thin; border-color: blue;}
#d1 {border-style: double; border-color: #0000EE;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 4, 5, 6, 7

border-left

This property defines the width, style, and color for the left border of an element in a shorthand form. The syntax for the rules should be in order, as follows:

border-left: border-width border-style border-color;

Given that CSS1 did not support border-left-color and border-left-style, this property is useful for setting the characteristics of the left of boxes for older browsers.

Example

#leftout {border-left: thin dashed red;}

Browser and CSS Support Notes

CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7

border-left-color

This property defines the color of an element's left border. See Appendix E for information on browser support of color values.

Example

p {border-style: solid; border-width: thin; border-left-color: red;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-left-style

This property defines the style for the left border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style.

Example

#box {border-width: 5px; border-style: solid; border-left-style: dotted;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-left-width

This property sets the width of an element's left border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on.

Examples

.thin {border-style: dashed; border-left-width: thin;}
p {border-style: solid; border-left-width: 5px;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

border-right

This property defines the width, style, and color for the bottom border of an element in a shorthand form. The syntax for the rules should be in order, as follows:

border-right: width style color;

Given that CSS1 did not support border-right-color and border-right-style, this property is useful for setting the characteristics of the right of boxes for older browsers.

Example

#greenzone {border-right: thick dashed green;}

Browser and CSS Support Notes

CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7

border-right-color

This property defines the color of an element's right border. See Appendix E for information on browser support of color values.

Example

p {border-style: solid; border-width: thin; border-right-color: green;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-right-style

This property defines the style for the right border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style.

Example

#box {border-width: 5px; border-style: solid; border-right-style: ridge;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-right-width

This property sets the width of an element's right border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on.

Examples

div {border-right-width: medium;}
.superfat {border-right-width: 40px;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4,4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

border-spacing

This CSS2 property is similar to the cellspacing attribute on the table element in HTML/XHTML and defines the space between cells in a table. Its value can be an arbitrary length, but not negative. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing between cells.

Examples

table {border-spacing: 10px;}
#table2 {border-spacing: 10px 5px;}

Browser and CSS Support Notes

CSS2 No IE support Nav 6, 7
Opera 5, 6, 7

border-style

The border-style property defines the style of up to four different sides of a border, using the values none, dotted, dashed, solid, double, groove, ridge, inset, and outset. A value of none overrides any borders currently set. Dashed and dotted values are distinctly different but many browsers will set them the same. Solid is the default value. Double sets a double line border. Groove sets an edge line style border while a ridge value sets the border to resemble a raised ridge by reversing the shading of the grooved rendering. An inset value sets the border to display a lighter shade of the border color on its right and bottom sides while an outset value sets the border to display a lighter shade of the border color on its top and left sides.

Examples of these styles are shown here:

The shorthand style allows individual borders to be set. A single value copies to all border sides. With two values, the first sets the border style of top and bottom, and the second sets the right and left values. With three values, the first sets the top style, the second sets the right and left, and the third sets the bottom style. With four values, each is set individually in the order top, right, bottom, and left. In general, missing values are inferred from the value defined for the opposite side.

Examples

p {border-style: solid;}
.twosides {border-style: dashed solid;}
.allsides {border-style: solid dashed groove inset;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (no dotted/dashed), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

NOTE Netscape 4 supports only one value for border-style. Use of multiple values will create erratic display under that browser.

border-top

This property defines the width, style, and color for the top border of an element in a shorthand form. The syntax for the rules should be in order, as follows:

border-top: border-width border-style border-color;

Given that CSS1 did not support border-top-color and border-top-style, this property is useful for setting the characteristics of the top of boxes for older browsers.

Example

#boxtop {border-top: thin solid blue;}

Browser and CSS Support Notes

CSS1
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 4, 5, 6, 7

border-top-color

This property defines the color of an element's top border. See Appendix E for information on browser support of color values.

Example

p {border-style: solid; border-width: thin; border-top-color: red;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-top-style

This property defines the style for the top border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style.

Example

#box {border-width: 1px; border-style: solid; border-top-style: dashed;}

Browser and CSS Support Notes

CSS2
IE 4, 5, 5.5, 6
Nav 6, 7
Opera 7

border-top-width

This property sets the width of an element's top border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on.

Examples

p {border-top-width: thin;}
#thicktop {border-top-width: 25px;}

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

border-width

This property sets the width of an element's complete border. Values can be keywords (thin, medium, or thick) and numerical lengths. The border-width property can also be used to specify all four borders individually in the standard top, right, bottom, left style. A single value copies to all border sides. With two values, the first sets the border width of top and bottom, and the second sets the right and left values. With three values, the first sets the top width, the second sets the right and left, and the third sets the bottom width. With four values, each is set individually in the order top, right, bottom, and left.

Examples

div {border-width: medium;} /* all sides set medium */
#d1 {border-width: 10px 5px;} /* 10px top-bottom, 5px right and left */
#fun {border-width: 10px 1px 4px 50px;} /* sides set individually */

Browser and CSS Support Notes

CSS1
IE 4, 5 (buggy), 5.5, 6
Nav 4, 4.5-4.8 (buggy), 6, 7
Opera 5, 6, 7

CSS Properties

Back: background properties

Next: bottom

<About> <Chapters> <Examples> <Errata> <Reference> Appendix A - (X)HTML Appendix B - CSS Style Inclusion Methods Measurements Color Values Selectors Miscellaneous Constructs CSS1 / CSS2 Properties Appendix C - Entities Appendix D - Fonts Appendix E - Colors <Home>	home » reference » appendix b » css1 / css2 properties border This property defines the width, style, and color for all four sides of an element's border in a shorthand form. There are five specific properties for setting the width of borders: border-top-width, border-bottom-width, border-right-width, border-left-width, and border-width. The first four set the width of specific borders; border-width is used to set all four. The border property by itself can set all of them. Values for border widths can be set in numeric measurements or with the named values thin, medium, or thick. Border colors and styles can be set with the properties border-color and border-style, respectively, as well as with the shorthand. The properties border-top, border-bottom, border-right, and border-left can be used to set width, style, and color values for different sides of a border. Given all these properties, the border property sets the width, style, and color of all sides of an element's border, typically in that order. The syntax is shown here: border: border-width border-style border-color; Given the complexity of the rule, like many shorthand properties, individual properties should probably be set and then condensed to shorthand form. Examples div {border: 2px double red;} .dashed {border: .5em dashed #f00;} Browser and CSS Support Notes CSS1, IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 border-bottom This property defines the width, style, and color for the bottom border of an element in a shorthand form. The syntax for the rules should be in order, as follows: border-bottom: border-width border-style border-color; Given that CSS1 did not support border-bottom-color and border-bottom-style, this property is useful for setting the characteristics of the bottom of boxes for older browsers. Example #redbottom {border-top: thin solid red;} Browser and CSS Support Notes CSS1 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 4, 5, 6, 7 border-bottom-color This property defines the color of an element's bottom border. See Appendix E for information on browser support of color values. Example p {border-style: solid; border-width: thin; border-bottom-color: orange;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-bottom-style This property defines the style for the bottom border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style. Example #box {border-width: 10px; border-style: solid; border-bottom-style: double;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-bottom-width This property sets the width of an element's bottom border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on. Examples .low {border-bottom-width: thick;} p {border-bottom-width: 15px;} Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 border-collapse This CSS2 property defines if table cell borders are connected or separate. Allowed values are separate and collapse. With a value of collapse, the borders appear to collapse on each other so that there's no more spacing between the borders. A rendering here in Internet Explorer 6 should illustrate the idea of the property. Example <table border="1" style="border-collapse: collapse;"> <tr> <td>Cell 1</td><td>Cell 2</td><td>Cell 3</td> </tr> <tr> <td>Cell 4</td><td></td><td>Cell 5</td> </tr> </table> Browser and CSS Support Notes CSS2 IE 5, 5.5, 6 (buggy) Nav 6, 7 Opera 5, 6, 7 TIP There are significant rendering differences in browsers even when the border-collapse property is supported. border-color This property defines the color of an element's border. All borders are set at once but individual color values can be set with the shorthand border-top, border-right, border-bottom, and border-left. See Appendix E for information on browser support of color values. Examples p {border-style: solid; border-width: thin; border-color: blue;} #d1 {border-style: double; border-color: #0000EE;} Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 4, 5, 6, 7 border-left This property defines the width, style, and color for the left border of an element in a shorthand form. The syntax for the rules should be in order, as follows: border-left: border-width border-style border-color; Given that CSS1 did not support border-left-color and border-left-style, this property is useful for setting the characteristics of the left of boxes for older browsers. Example #leftout {border-left: thin dashed red;} Browser and CSS Support Notes CSS1 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 4, 5, 6, 7 border-left-color This property defines the color of an element's left border. See Appendix E for information on browser support of color values. Example p {border-style: solid; border-width: thin; border-left-color: red;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-left-style This property defines the style for the left border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style. Example #box {border-width: 5px; border-style: solid; border-left-style: dotted;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-left-width This property sets the width of an element's left border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on. Examples .thin {border-style: dashed; border-left-width: thin;} p {border-style: solid; border-left-width: 5px;} Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 border-right This property defines the width, style, and color for the bottom border of an element in a shorthand form. The syntax for the rules should be in order, as follows: border-right: width style color; Given that CSS1 did not support border-right-color and border-right-style, this property is useful for setting the characteristics of the right of boxes for older browsers. Example #greenzone {border-right: thick dashed green;} Browser and CSS Support Notes CSS1 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 4, 5, 6, 7 border-right-color This property defines the color of an element's right border. See Appendix E for information on browser support of color values. Example p {border-style: solid; border-width: thin; border-right-color: green;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-right-style This property defines the style for the right border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style. Example #box {border-width: 5px; border-style: solid; border-right-style: ridge;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-right-width This property sets the width of an element's right border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on. Examples div {border-right-width: medium;} .superfat {border-right-width: 40px;} Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4,4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 border-spacing This CSS2 property is similar to the cellspacing attribute on the table element in HTML/XHTML and defines the space between cells in a table. Its value can be an arbitrary length, but not negative. If one length is specified, it gives both the horizontal and vertical spacing. If two are specified, the first gives the horizontal spacing and the second the vertical spacing between cells. Examples table {border-spacing: 10px;} #table2 {border-spacing: 10px 5px;} Browser and CSS Support Notes CSS2 No IE support Nav 6, 7 Opera 5, 6, 7 border-style The border-style property defines the style of up to four different sides of a border, using the values none, dotted, dashed, solid, double, groove, ridge, inset, and outset. A value of none overrides any borders currently set. Dashed and dotted values are distinctly different but many browsers will set them the same. Solid is the default value. Double sets a double line border. Groove sets an edge line style border while a ridge value sets the border to resemble a raised ridge by reversing the shading of the grooved rendering. An inset value sets the border to display a lighter shade of the border color on its right and bottom sides while an outset value sets the border to display a lighter shade of the border color on its top and left sides. Examples of these styles are shown here: The shorthand style allows individual borders to be set. A single value copies to all border sides. With two values, the first sets the border style of top and bottom, and the second sets the right and left values. With three values, the first sets the top style, the second sets the right and left, and the third sets the bottom style. With four values, each is set individually in the order top, right, bottom, and left. In general, missing values are inferred from the value defined for the opposite side. Examples p {border-style: solid;} .twosides {border-style: dashed solid;} .allsides {border-style: solid dashed groove inset;} Browser and CSS Support Notes CSS1 IE 4, 5 (no dotted/dashed), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 NOTE Netscape 4 supports only one value for border-style. Use of multiple values will create erratic display under that browser. border-top This property defines the width, style, and color for the top border of an element in a shorthand form. The syntax for the rules should be in order, as follows: border-top: border-width border-style border-color; Given that CSS1 did not support border-top-color and border-top-style, this property is useful for setting the characteristics of the top of boxes for older browsers. Example #boxtop {border-top: thin solid blue;} Browser and CSS Support Notes CSS1 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 4, 5, 6, 7 border-top-color This property defines the color of an element's top border. See Appendix E for information on browser support of color values. Example p {border-style: solid; border-width: thin; border-top-color: red;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-top-style This property defines the style for the top border of an element. Allowed values are none, dotted, dashed, solid, double, groove, ridge, inset, and outset. See border-style property for specific information on each style. Example #box {border-width: 1px; border-style: solid; border-top-style: dashed;} Browser and CSS Support Notes CSS2 IE 4, 5, 5.5, 6 Nav 6, 7 Opera 7 border-top-width This property sets the width of an element's top border. Values can be keywords (thin, medium, or thick) and numerical lengths such as pixels (px), inches (in), and so on. Examples p {border-top-width: thin;} #thicktop {border-top-width: 25px;} Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7 border-width This property sets the width of an element's complete border. Values can be keywords (thin, medium, or thick) and numerical lengths. The border-width property can also be used to specify all four borders individually in the standard top, right, bottom, left style. A single value copies to all border sides. With two values, the first sets the border width of top and bottom, and the second sets the right and left values. With three values, the first sets the top width, the second sets the right and left, and the third sets the bottom width. With four values, each is set individually in the order top, right, bottom, and left. Examples div {border-width: medium;} /* all sides set medium / #d1 {border-width: 10px 5px;} / 10px top-bottom, 5px right and left / #fun {border-width: 10px 1px 4px 50px;} / sides set individually */ Browser and CSS Support Notes CSS1 IE 4, 5 (buggy), 5.5, 6 Nav 4, 4.5-4.8 (buggy), 6, 7 Opera 5, 6, 7		(X)HTML Elements CSS Properties
	Back: background properties	Next: bottom	back to top