CSS border-right-style Property

CSS border-right-style Property


CSS border-right-style Property
This property defines the style for the right border of an element. 
Syntax -
border-right-style: dashed | dotted | double | groove | hidden | inset | inherit | none | outset | ridge | solid
Now we will see the values and their descriptions -
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.
Now we will see Example 
Example -  Using all the values -
<!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>
Output -