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

How to set all the border bottom properties in one declaration in JavaScript DOM?


To set the border bottom properties in one declaration in JavaScript, use the borderBottom property. It allows you to set the border-bottom-width, border-bottom-style, and border-bottom-color.

Example

You can try to run the following code to learn how to set border bottom properties −

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            border: 2px dashed blue;
            width: 120px;
            height: 120px;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">Set border bottom color</button>
      <div id="box">
         <p>Demo Text</p>
         <p>Demo Text</p>
      </div>
      <script>
         function display() {
            document.getElementById("box").style.borderBottom = "thin dashed #000000";
         }
      </script>
   </body>
</html>