JavaScript – Change the Right Border of HTML Element

To change the right border of a HTML Element using JavaScript, get reference to this HTML element, and assign required value to the element.style.borderRight property.

Example

In the following example, we will change the right border of HTML Element with id "myElement" to "2px dotted red", in JavaScript, using element.style.borderRight property.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        #myElement {
            border:1px solid #CCC;
            width:100px;
            height:100px;
        }
    </style>
    <meta charset="utf-8">
</head> 
<body>
    <h2>Change Right Border of HTML Element in JavaScript</h2>
    <div id="myElement">Hello World!</div>
    <br>
    <button type="button" onclick="changeStyle()">Click Me</button>
    <script>
    function changeStyle(){
        var element = document.getElementById("myElement");
        element.style.borderRight = "2px dotted red";;
    }
    </script>
</body>
</html>

Conclusion

In this JavaScript Tutorial, we learned how to change the right border of a HTML Element using JavaScript.