Style borderStyle
Property
Definition and Usage
The borderStyle
property sets or returns the style of an element's border.
This property can use from 1 to 4 styles:
If one style is specified, e.g.,
p {border-style: solid}
- all four borders are solid lines.If two styles are specified, e.g.,
p {border-style: solid dotted}
- the top and bottom borders are solid lines, while the left and right borders are dotted.If three styles are specified, e.g.,
p {border-style: solid dotted double}
- the top border is solid, the left and right borders are dotted, and the bottom border is double.If four styles are specified, e.g.,
p {border-style: solid dotted double dashed}
- the top border is solid, the right border is dotted, the bottom border is double, and the left border is dashed.
Syntax
Set the borderStyle
property:
Return the borderStyle
property:
Value | Description |
---|---|
none | Default. Defines no border. |
hidden | Same as "none", except for table borders conflict resolution. |
dotted | Defines a dotted border. |
dashed | Defines a dashed border. |
solid | Defines a solid border. |
double | Defines a double border. The width of the double line is equal to the border-width value. |
groove | Defines a 3D grooved border. The effect depends on the border-color value. |
ridge | Defines a 3D ridged border. The effect depends on the border-color value. |
inset | Defines a 3D inset border. The effect depends on the border-color value. |
outset | Defines a 3D outset border. The effect depends on the border-color value. |
inherit | The border style is inherited from the parent element. |
Browser Support
All major browsers support the borderStyle
property.
Note: IE7 and earlier versions do not support the "inherit" value. IE8 supports "inherit" only if an !DOCTYPE is specified. IE9 supports "inherit".
Example
Change the style of all four borders: