HTML DOM Style borderRightStyle Property

The HTML DOM borderRightStyle property is used for setting or returning the right border style for an element.

Following is the syntax for −

Setting the borderRightStyle property − = value

The above properties are explained as follows −

noneThis is the default value specifying no border.
hiddenThis is same as "none" but will still take border space. It is basically transparent but still there.
dottedThis defines a dotted border.
dashedThis defines a dashed border.
solidThis defines a solid border.
doubleThis defines a double border groove
grooveThis defines a 3d groove border and is the opposite of ridge.
ridgeThis defines a 3D ridged border and is the opposite of groove
insetThis defines a 3D inset border and the effect looks like it is embedded. It produces the opposite effect of outset.
outsetThis defines a 3D inset border and the effect looks like it is embossed. It produces the opposite effect of inset.
initialFor setting this property to initial value.
inheritTo inherit the parent property value

Let us look at an example for the borderRightStyle Property −


 Live Demo

<!DOCTYPE html>
      border-Right: 8px solid dodgerblue;
      border-Right-style: groove;
   function changeRightStyle(){
      document.getElementById("Sample").innerHTML="The Right border style is now changed";
   <div id="DIV1">SOME SAMPLE TEXT</div>
   <p>Change the above div Right border style size by clicking the below button</p>
   <button onclick="changeRightStyle()">Change Right Style</button>
   <p id="Sample"></p>


On clicking the “Change Right Style” button −

Updated on: 23-Oct-2019


Kickstart Your Career

Get certified by completing the course

Get Started