border-style
Definition
The border-style property specifies the line style of the element's four borders. Border is the space between the element's padding and the element's margin, represented by the yellow highlighted area in the illustration below.
The following screen shot shows some border styles rendered by a Web browser.
Example
h1 {border-style: none}h2 {border-style: solid dashed}
Characteristics
Possible values
One, two, three or four of the following values:
none- No border; the border width is zero.
hidden- As for
none, the result is no border. However, in situations of border conflict for table elements, hidden has priority over other border styles, while none does not. dotted- The border is a series of dots.
dashed- The border is a series of short line segments.
solid- The border is a single line segment.
double- The border is made of two solid lines. The sum of the two lines and the space between them equals the value of border-width.
groove- The border looks as though it were carved into the background.
ridge- The opposite of
groove: the border looks as though it were rising out of the background. inset- The border makes the box look as though it were embedded in the background.
outset- The opposite of
inset: the border makes the box look as though it were rising out of the background.
If there is only one value, it applies to all borders. If there are two values, the top and bottom borders are set to the first value, and the right and left borders are set to the second. If there are three values, the top border is set to the first value, the left and right borders to the second, and the bottom border to the third. If there are four values, they apply to the top, right, bottom, and left borders, respectively.
inherit- Use the same computed value as the parent element for this property.
Default value
none
Applies to
All elements
Inherited
No
See also