Set All 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>
Updated on: 2020-06-23T11:07:31+05:30

124 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements