Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the style of the bottom border with JavaScript?

Javascript Web Development Front End Scripts

To set the style of the bottom border, use the JavaScript borderBottomStyle property. It allows you to add a bottom border with different styles like solid, dashed, dotted, and more.

Syntax

element.style.borderBottomStyle = "value";

Common Border Style Values

Value Description
solid Creates a solid line
dashed Creates a dashed line
dotted Creates a dotted line
double Creates a double line
none Removes the border

Example

The following example demonstrates how to set different bottom border styles on button clicks:

<!DOCTYPE html>
<html>
<head>
   <style>
      #box {
         width: 200px;
         height: 100px;
         border: 2px solid black;
         padding: 20px;
         margin: 10px 0;
      }
   </style>
</head>
<body>
   <div id="box">Demo Text</div>
   <button onclick="setSolid()">Solid Border</button>
   <button onclick="setDashed()">Dashed Border</button>
   <button onclick="setDotted()">Dotted Border</button>
   <button onclick="removeBorder()">Remove Border</button>

   <script>
      function setSolid() {
         document.getElementById("box").style.borderBottomStyle = "solid";
         document.getElementById("box").style.borderBottomWidth = "5px";
         document.getElementById("box").style.borderBottomColor = "blue";
      }

      function setDashed() {
         document.getElementById("box").style.borderBottomStyle = "dashed";
         document.getElementById("box").style.borderBottomWidth = "5px";
         document.getElementById("box").style.borderBottomColor = "red";
      }

      function setDotted() {
         document.getElementById("box").style.borderBottomStyle = "dotted";
         document.getElementById("box").style.borderBottomWidth = "5px";
         document.getElementById("box").style.borderBottomColor = "green";
      }

      function removeBorder() {
         document.getElementById("box").style.borderBottomStyle = "none";
      }
   </script>
</body>
</html>

Setting Multiple Border Properties

You can combine borderBottomStyle with other border properties for complete control:

<!DOCTYPE html>
<html>
<body>
   <div id="myDiv">Sample Text</div>
   <button onclick="setBorder()">Set Complete Border</button>

   <script>
      function setBorder() {
         var element = document.getElementById("myDiv");
         element.style.borderBottomStyle = "double";
         element.style.borderBottomWidth = "6px";
         element.style.borderBottomColor = "purple";
         element.style.padding = "15px";
      }
   </script>
</body>
</html>

Key Points

  • The border style must be set before width and color take effect
  • Use borderBottomWidth and borderBottomColor for complete styling
  • Setting style to "none" removes the bottom border entirely
  • Changes are applied immediately to the DOM element

Conclusion

The borderBottomStyle property provides an easy way to modify bottom borders dynamically. Combine it with width and color properties for complete border control.

Updated on: 2026-03-15T23:18:59+05:30

416 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements