border-right-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
|
Value
|
Description
|
none
|
This specifies no border, and this is the default
|
hidden
|
This is just as same as "none", except in border conflict resolution for table elements
|
dotted
|
Specifies a dotted border
|
dashed
|
Specifies a dashed border
|
solid
|
Specifies a solid border
|
double
|
Specifies a double border
|
groove
|
This specifies a 3D grooved border.
|
ridge
|
This specifies a 3D ridged border.
|
inset
|
This specifies a 3D inset border.
|
outset
|
This specifies a 3D outset border.
|
<!DOCTYPE html>
<html> <style> body{ background-color: black; color:aliceblue; } .one{ border: 4px solid; border-right-color:aquamarine; border-right-style: dotted; } .two{ border: 4px solid; border-right-color:#865ef5; border-right-style:dashed; } .three{ border: 4px solid; border-right-color:rgb(9, 232, 154); border-right-style:double; } .four{ border: 4px solid; border-right-color: rgb(241, 231, 117); border-right-style:groove; } .five{ border: 4px solid; border-right-color:hsl(328, 84%, 58%); border-right-style:hidden; } .six{ border: 4px solid; border-right-color:aqua; border-right-style:ridge; } </style> <body> <h1 class="one">This is a heading</h1> <h1 class="two">This is a heading</h1> <h1 class="three">This is a heading</h1> <h1 class="four">This is a heading</h1> <h1 class="five">This is a heading</h1> <h1 class="six">This is a heading</h1> </body> </html> |