CSS border-style property
➔ The border-style property specifies what type of border should be applied to an element.
➔ The border-style property has the following values.
dasheddotteddoublegroovehiddeninsetnoneoutsetridgesolid
Syntax
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| none | Does not specify any border. This is default. |
| hidden | Similar to 'none'. |
| 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. |
| ridge | Specifies a 3d ridge border. |
| inset | Specifies a 3d inset border. |
| outset | Specifies a 3d outset border. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Example
<style>
.p1 {
border-style: none;
}
.p2 {
border-style: hidden;
}
.p3 {
border-style: dotted;
border-color: red;
}
.p4 {
border-style: dashed;
border-color: black;
}
.p5 {
border-style: solid;
}
.p6 {
border-style: double;
}
.p7 {
border-style: groove;
}
.p8 {
border-style: ridge;
}
.p9 {
border-style: inset;
}
.p10 {
border-style: outset;
}
</style>
Click on the "Try it Now" button to see how it works.
Border Side Style
Each border side can be styled separately.
border-style: dashed dotted double solid;
Here,top:dashed.
right:dotted.
bottom:double.
left:solid.
border-style: dashed dotted double;
Here,top:dashed.
right:dotted.
bottom:double.
left:dotted.
border-style: dashed dotted;
Here,top:dashed.
right:dotted.
bottom:dashed.
left:dotted.
border-style: dashed
Here,top:dashed.
right:dashed.
bottom:dashed.
left:dashed.
Example
.p1 {
border-style: dashed dotted double solid;
}
.p2 {
border-style: dashed dotted;
}Click on the "Try it Now" button to see how it works.