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


In this tutorial, we shall learn to set the width of the bottom border with JavaScript. To set the width of the bottom border, we can use the borderBottomWidth property in JavaScript. It allows you to change the width. Let us discuss our topic in brief.

Using the borderBottomWidth Property

With this property, we can set or return the width of an element's bottom border.

Width is a floating point number with either a relative units designator (cm, mm, in, pt, or pc) or an absolute units designator (em, ex, or px).

Syntax

Following is the syntax to set the width of the bottom border using the Style borderBottomWidth property in JavaScript −

object.style.borderBottomWidth = "thin | medium | thick | length | initial | inherit";

This syntax allows us to set the required border bottom width to the element's style.

Parameters

  • thin − Sets a thin border.
  • medium − Sets a medium border.
  • thick − Sets a thick border.
  • length − The border width in length units.
  • initial − Sets this property to its default value.
  • inherit − Inherits this property from its parent element.

Example

You can try to run the following code to learn how to set the width of the bottom border.

<!DOCTYPE html> <html> <body> <div id="box">Demo Text</div> <br> <button onclick="display()">Click to set width of bottom border</button> <script> function display() { document.getElementById("box").style.borderBottomStyle="dashed"; document.getElementById("box").style.borderBottomWidth="5px"; } </script> </body> </html>

Example 2

In this program, we are setting the bottom border width to a div element. We get the bottom border width from the user.

When the user ticks on the button, we call the function to set the bottom border width following the syntax given above.

<html> <head> <style> #btmBrdrWdthUsrEl{ background-color: #FFFFFF; height: 50px; padding-top: 35px; padding-left: 5px; border: thin solid #000000; } </style> </head> <body> <h3> Set the width of the bottom border using the <i>borderBottomWidth </i> property. </h3> <div id="btmBrdrWdthUsrEl"> Set the bottom border width here. </div> <br> <div id="btmBrdrWdthUsrBtnWrap"> <select id="btmBrdrWdthUsrSel"> <option/> thick <option/> medium <option selected = "selected"/> thin <option/> initial <option/> inherit <option/> 9px <option/> 8ex <option/> 7em <option/> 6cm <option/> 5mm <option/> 4in <option/> 3pt <option/> 2pc </select> <br><br> <p> Provide the border-bottom width and click on the button. </p> <button onclick="setBottomBorderWidth();"> Set </button> </div> <br> </body> <script> function setBottomBorderWidth(){ var btmBrdrWdthUsrSelTag=document.getElementById("btmBrdrWdthUsrSel"); var btmBrdrWdthUsrSelIndx=btmBrdrWdthUsrSelTag.selectedIndex; var btmBrdrWdthUsrSelStat=btmBrdrWdthUsrSelTag.options[btmBrdrWdthUsrSelIndx].text; var btmBrdrWdthUsrBtnWrap=document.getElementById("btmBrdrWdthUsrBtnWrap"); // btmBrdrWdthUsrBtnWrap.style.display="none"; var btmBrdrWdthUsrEl=document.getElementById("btmBrdrWdthUsrEl"); btmBrdrWdthUsrEl.style.borderBottomWidth=btmBrdrWdthUsrSelStat; } </script> </html>

Example 3

This program has set the bottom border width to a div element. When the user clicks on the button, we display the bottom border width following the syntax for getting the width of the bottom border.

<html> <head> <style> #btmBrdrWdthGetEl{ background-color: #9370DB; height: 100px; padding-top:70px; } </style> </head> <body> <h3> Getting the width of the bottom border using the<i> borderBottomWidth </i>property. </h3> <div id="btmBrdrWdthGetEl" style="border: medium dashed #000000;"> Get the bottom border width of this element. </div> <br> <div id="btmBrdrWdthGetBtnWrap"> <p> Click on the button to get the width. </p> <button onclick="getBottomBorderWidth();"> Get </button> </div> <br> <p id="btmBrdrWdthGetOp"> </p> </body> <script> function getBottomBorderWidth(){ var btmBrdrWdthGetBtnWrap=document.getElementById("btmBrdrWdthGetBtnWrap"); var btmBrdrWdthGetEl=document.getElementById("btmBrdrWdthGetEl"); var btmBrdrWdthGetOp=document.getElementById("btmBrdrWdthGetOp"); // btmBrdrWdthGetBtnWrap.style.display="none"; btmBrdrWdthGetOp.innerHTML="The bottom border width is = <b>" + btmBrdrWdthGetEl.style.borderBottomWidth + "</b>"; } </script> </html>

In this tutorial, we went through the borderBottomWidth property in JavaScript. To set the width of the bottom border, this property is a built-in option in JavaScript and is very easy to code.

Updated on: 22-Nov-2022

249 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements