Computer >> Computer tutorials >  >> Programming >> Javascript

How to set the color of an elements border with JavaScript?


To set the color of an element's border in JavaScript, use the borderColor property.

Example

You can try to run the following code to learn how to set a color of an element's border −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            height: 300px;
            width: 200px;
            border: thick dashed yellow;
         }
      </style>
   </head>
   <body>
      <div id="box">
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
         <p>DEMO TEXT</p>
      </div>
      <br>
      <button type="button" onclick="display()">Set new color of border</button>
      <script>
         function display() {
            document.getElementById("box").style.borderColor = "green";
         }
      </script>
   </body>
</html>