Article Categories

Selected Reading

How to set all the border right properties in one declaration with JavaScript?

Javascript Web Development Front End Scripts

To set all the border right properties in JavaScript, use the borderRight property. This property allows you to set the border color, style, and width at once using a single declaration.

Syntax

element.style.borderRight = "width style color";

Parameters

The borderRight property accepts a string value with three components:

width - Border thickness (e.g., "2px", "thick", "thin")
style - Border style (e.g., "solid", "dashed", "dotted")
color - Border color (e.g., "#000000", "red", "rgb(255,0,0)")

Example

You can try to run the following code to learn how to set all the border right properties at once:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #box {
        border: thick solid gray;
        width: 300px;
        height: 200px;
        padding: 20px;
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div id="box">Demo Text</div>
    <br><br>
    <button type="button" onclick="display()">Change right border</button>
    <script>
      function display() {
        document.getElementById("box").style.borderRight = "thick solid #000000";
      }
    </script>
  </body>
</html>

Multiple Border Right Examples

<!DOCTYPE html>
<html>
  <head>
    <style>
      .demo-box {
        width: 200px;
        height: 100px;
        padding: 15px;
        margin: 10px 0;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div class="demo-box" id="box1">Box 1</div>
    <div class="demo-box" id="box2">Box 2</div>
    <div class="demo-box" id="box3">Box 3</div>
    
    <button onclick="setBorders()">Apply Different Right Borders</button>
    
    <script>
      function setBorders() {
        // Thick solid black border
        document.getElementById("box1").style.borderRight = "5px solid black";
        
        // Dashed red border
        document.getElementById("box2").style.borderRight = "3px dashed red";
        
        // Dotted blue border
        document.getElementById("box3").style.borderRight = "4px dotted blue";
      }
    </script>
  </body>
</html>

Common Border Styles

Style	Description	Example Value
`solid`	Continuous line	"2px solid black"
`dashed`	Series of dashes	"3px dashed red"
`dotted`	Series of dots	"1px dotted blue"
`double`	Two parallel lines	"4px double green"

Key Points

The order of values is: width, style, color
All three values can be specified in one declaration
Individual properties like borderRightWidth, borderRightStyle, and borderRightColor can also be set separately
Changes take effect immediately when applied

Conclusion

The borderRight property provides a convenient way to set width, style, and color for the right border in a single JavaScript statement. This approach is more efficient than setting individual border properties separately.

Vikyath Ram

Updated on: 2026-03-15T23:18:59+05:30

258 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next