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 −

Live Demo

<!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>

Lakshmi Srinivas

Updated on: 2020-06-23T11:07:31+05:30

153 Views

Kickstart Your Career

Get certified by completing the course

Get Started