border-style

The border of an element resides between the padding and margin areas of the element container. Border properties may be set as a single value for all four sides, or as individual values for each side. Border values are not inherited: they are valid only in that instance of the element. border-style This property is used to display a border style other than the normal solid color. The default for border styles is 'none'. In order for the border to be made visible, a border-style and a border-width statement must be made. border-style values none This is the default, and causes no border to be displayed. It is used to revert back to the default 'none' state. It is recommended you experiment with these settings to get a feel for them. Varying the width and color for each value will produce some interesting effects. dotted This value will obviously display a dotted line for the border. dashed This value will display a dashed line for the border. solid This value will display the border as a solid color. double This value will display the border as two solid lines. The area between the solid lines will be the color of the background. groove This value sets the border to an indented 3-D 'grooved' effect. ridged This value will display the border as a raised 3-D 'peaked' effect, like a mountain ridge. inset This is another 3-D effect that causes the contents of the element to appear as though it were recessed deeper in the page than the surrounding content. outset This value produces the 3-D effect of having the contents of the element to appear as though it were raised to a higher level than that of the rest of the screen. As many as four style values may be used around the border of an element. It should be noted that some browsers may not be able to display the groove, ridge, inset, or outset values. If these values are encountered, a solid line will most likely be displayed as a substitute.