border-style
The border-style property defines the style of the borders of an element. It accepts one to four values.
Syntax
border-style: value;
One value:
border-style: solid;
This value applies to all four borders.
Two values:
border-style: solid dotted;
The first value, solid applies to the top and bottom borders, and the second value, dotted applies to the left and right borders of an element.
Three values:
border-style: solid dotted dashed;
The first value, solid applies to the top border, the second value, dotted applies to the left and right borders, and the third value, dashed applies to the bottom border.
Four values:
border-style: solid dotted dashed double;
The first value, solid applies to the top border, the second value, dotted applies to the right border, the third value, dashed applies to the bottom border and the fourth value, double applies to the left border.
Example
.mydiv{
border-style: solid
}
.div2{
border-style: dotted none;
}
Property Values
none: sets no border style. (default value)
solid: sets a solid border.
hidden: hides the border style.
dashed: sets a dashed border.
dotted: sets a dotted border.
double: sets a double border.
groove: sets a 3D groove border.
ridge: sets a 3D ridge border.
inset: sets a 3D inset border.
outset: sets a 3D outset border.