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
Example
.p1 {
border-style: dashed;
border-color: black;
}
.p2 {
border-style: dotted;
border-color: red;
}
.p3 {
border-style: double;
border-color: blue;
}
.p4 {
border-style: groove;
border-color: blue;
}
.p5 {
border-style: hidden;
border-color: blue;
}
.p6 {
border-style: inset;
border-color: blue;
}
.p7 {
border-style: none;
border-color: blue;
}
.p8 {
border-style: outset;
border-color: blue;
}
.p9 {
border-style: ridge;
border-color: blue;
}
.p10 {
border-style: solid;
border-color: blue;
}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;
Here,top:dashed.
right:dotted.
bottom:dashed.
left:dotted.
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.