The Border-Style Properties

The border-style property sets the appearance of the border.

Name:	border-style
Value:	<border-style> {1,4}
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A

Name:	border-top-style, border-right-style, border-bottom-style, border-left-style
Value:	<border-style>
Initial:	none
Applies to:	all elements
Inherited:	no
Percentages:	N/A

These properties accept one of 10 keywords:

• none No border is drawn, regardless of any border width that may be set (see later in this section). This is the default.

• dotted A dotted line.

• dashed A dashed line.

• solid A solid line.

• double A double line. The sum of the two lines and the space between them equals the border-width value.

• groove A 3D groove. The shadow effect is the result of using colors that are a bit darker and a bit lighter than those given by border-color or color.

• ridge A 3D ridge.

• inset A 3D inset.

• outset A 3D outset.

• hidden Similar to none except for shared borders in tables where hidden will remove other borders.

Figure 8.9 shows an example of each type of border style.

Figure 8.9. Border styles.

With the border-style property, you set the styles of all four borders at once, as follows:

• One value is set That value applies to all four sides.

• Two values are set The top and bottom borders are set to the first value, and the right and left borders are set to the second.

• Three values are set The top border is set to the first value, the right and left borders are set to the second, and the bottom border is set to the third.

• Four values are set The values are applied in top, right, bottom, and left order.

The following are examples of code for using the border-style property in these various ways:

 /* All borders will be dotted. */ BODY { border-style: dotted } /* The top and bottom borders will be dashed    and the left and right borders will be solid. */ BODY { border-style: dashed solid } /* The top border will be a 3d inset, the left and right    solid, and the bottom border will be a double line. */ BODY { border-style: inset solid double } /* Styles are applied in top/right/bottom/left order. */ BODY { border-style: ridge groove dashed dotted }