CSS border-style property is used to set the style of all four sides of an element’s border in a single declaration. It is a shorthand of the below four properties:
The border-style property can accept one, two, three, or four values at a time. The different number of values specified to the border-style property affects each border side differently. Let’s discuss each:
If only one value is specified:
- border-style: val;
The same style applies to all four sides of the border. Refer to the example below:
Example:
h1{
border-style: solid;
}
If two values are specified:
- border-style: val1 val2;
The first value(val1) applies to the top and bottom borders and the second value(val2) applies to the left and right borders. Refer to the example below:
Example:
h1{
border-style: solid dashed;
}
If three values are specified:
- border-style: val1 val2 val3;
The first value(val1) applies to the top border, the second value(val2) applies to the left and right borders and the third value(val3) applies to the bottom border of the element. Refer to the example below:
Example:
h1{
border-style: solid dashed dotted;
}
If four values are specified:
- border-style: val1 val2 val3 val4;
The first value(val1) applies to the top border, the second value(val2) applies to the right border, the third value(val3) applies to the bottom border and the fourth value applies to the left border of the element. Refer to the example below:
Example:
h1{
border-style: solid dashed dotted double;
}
CSS has several border styles available. All these border styles are listed below:
Example:
.p1{ border-style: none }
.p2{ border-style: hidden }
.p3{ border-style: solid }
.p4{ border-style: dashed }
.p5{ border-style: dotted }
.p6{ border-style: double }
.p7{ border-style: groove }
.p8{ border-style: ridge }
.p9{ border-style: inset }
.p10{ border-style: outset }
CSS Syntax
The border-style property has the following syntax:
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
The border-style property accepts the following values:
| none | This is the default value. No border is displayed. |
| hidden | The border remains hidden. |
| dotted | Specifies a dotted border. |
| dashed | Specifies a dashed border. |
| solid | Specifies a solid border. |
| double | Specifies a double border. |
| groove | Specifies a 3D groove border. The 3D effect depends on the border color. |
| ridge | Specifies a 3D ridge border. The 3D effect depends on the border color. |
| inset | Specifies a 3D inset border. The 3D effect depends on the border color. |
| outset | Specifies a 3D inset border. The 3D effect depends on the border color. |
| initial | Sets the border-style property its default value(none). |
| inherit | Inherits the border-style property from the parent element. |
General Info
| Default Value | none |
| Inherited | No |
| JavaScript Usage | element.style.borderStyle = “dashed dotted”; |
Related Pages
CSS Tutorial: CSS Borders
