HTML DOM Style borderRight Property

HTMLDOMFront End TechnologyWeb Development

The HTML DOM borderRight property is used as a shorthand for getting or setting the Right border properties for an element. The borderRight property contains border-Right-width, border-Right-style, border-Right-color.

Following is the syntax for −

Setting the borderRight property:

object.style.borderRight = "width style color|initial|inherit"

The above properties are explained as follows −

ParameterDescription
widthFor setting the Right border width.
styleFor setting the Right border style.
colorFor setting the Right border color.
initialFor setting this property to default value.
inheritTo inherit the parent property value.

Let us look at an example for the borderRight property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-Right: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderRight(){
      document.getElementById("P1").style.borderRight="9px dashed red";
      document.getElementById("Sample").innerHTML="The Right border for the paragraph element is now";
   }
</script>
</head>
<body>
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
<p>Change the above paragraph Right border properties by clicking the below button</p>
<button onclick="changeBorderRight()">Change Border Right</button>
<p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Border Right” button −

In the above example −

We have first created a paragraph with id “P1” that contains some text inside it and a corresponding css style applied to it.

#P1 {
   border-Right: 4px solid magenta;
   font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>

We then created a button “Change Border Right” that will execute the changeBorderRight() function on being clicked by the user.

pre class="result notranslate">
<button onclick="changeBorderRight()">Change Border Right</button>

The changeBorderRight() function gets borderRight style property of the paragraph element with id “P1” by using the getElementById() method and changes its property value to ‘9px dashed red’ . A message indicating this change is then displayed in the paragraph with id “Sample” using its innerHTML property.

function changeBorderRight(){
   document.getElementById("P1").style.borderRight="9px dashed red";
   document.getElementById("Sample").innerHTML="The right border for the paragraph element is now ";
}
raja
Published on 22-Oct-2019 17:36:49
Advertisements