How to set the style of an element's border with JavaScript?

In this tutorial, we shall learn to set the style of an element's border with JavaScript. To set the style of an element’s border, use the borderStyle property in JavaScript.

Let us discuss the borderStyle property available in detail.

Using the borderStyle Property

With the borderStyle property, we can set or return the style of an element's border.

Syntax

Following is the syntax to use the borderStyle property to set the style of an element’s border with JavaScript −

object.style.borderStyle = style;

This syntax allows us to set the required border style to the element's style. We will see the available style values below.

Parameters

  • none − Sets no border.

  • hidden − Similar to "none". Unique to table element border issues.

  • dotted − Sets a dotted border.

  • dashed − Sets a dashed border.

  • solid − Sets a solid border.

  • double − Sets two borders. The total width is equal to the border width.

  • groove − Sets a 3-D grooved border. The effect is dependent on the color.

  • ridge − Sets a 3-D ridged border. The effect is dependent on the color.

  • inset − Sets a 3-D inset border. The effect is dependent on the color.

  • outset − Sets a 3-D outset border. The effect is dependent on the color.

  • initial − Sets this property to the default value.

  • inherit − Inherits this property from its parent element.

The default value for the property is none. The return value is a string representing the border style.

Example 1

You can try to run the following code set in the style of an element’s border with JavaScript −

<!DOCTYPE html>
<html>
<head>
   <style>
      #newDiv {
         height: 150px;
         width: 450px;
         border: 2px solid #000000;
      }
   </style>

   <body>
      <div id="newDiv">
         Demo Content!
      </div>
      <br>
      <button type="button" onclick="display()">Change border style</button>
      <script>
         function display() {
            document.getElementById("newDiv").style.borderStyle = "dashed";
         }
      </script>
   </body>
</html>

Example 2

In this program, we are setting different border styles to multiple div elements.

When the user presses the button, we call the function to set an element's border style following the syntax given above.

<html>
<head>
   <style>
      .bordrStylEl {
         background-color: #FFFFFF;
         height: 50px;
         width: 60px;
         padding-top: 35px;
         padding-top: 5px;
         border: 5px solid blue;
         text-align: center;
         float: left;
         margin-right: 5px;
      }

      #bordrStylBtnWrap {
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the style of an element's border using the<i> borderStyle </i> property.
   </h3>
   <div class="bordrStylEl" id="bordrStylEl1"> Border 1 </div>
   <div class="bordrStylEl" id="bordrStylEl2"> Border 2 </div>
   <div class="bordrStylEl" id="bordrStylEl3"> Border 3 </div>
   <div class="bordrStylEl" id="bordrStylEl4"> Border 4 </div>
   <br>
   <div id="bordrStylBtnWrap"> <br />
      <p> Click the button to set different styles to an element's border. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setBorderStyle() {
      var bordrStylBtnWrap = document.getElementById("bordrStylBtnWrap");
      var bordrStylEl1 = document.getElementById("bordrStylEl1");
      var bordrStylEl2 = document.getElementById("bordrStylEl2");
      var bordrStylEl3 = document.getElementById("bordrStylEl3");
      var bordrStylEl4 = document.getElementById("bordrStylEl4");
      bordrStylEl1.style.borderStyle = "dashed";
      bordrStylEl2.style.borderStyle = "solid";
      bordrStylEl3.style.borderStyle = "dotted";
      bordrStylEl4.style.borderStyle = "double";
      bordrStylEl1.innerHTML = "<b> dashed </b>";
      bordrStylEl2.innerHTML = "<b> solid </b>";
      bordrStylEl3.innerHTML = "<b> dotted </b>";
      bordrStylEl4.innerHTML = "<b> double </b>";
   }
</script>
</html>

Example 3

In this program, we are setting an element's border style to a single div element. We get an element's border style from the user.

When the user presses the button, we call the function to set an element's border style following the syntax given above.

<html>
<head>
   <style>
      #bordrStylUsrEl {
         background-color: #FFFFFF;
         border: 5px solid purple;
         text-align: center;
      }
   </style>
</head>
<body>
   <h3>Setting the style of an element's border using the <i> borderStyle</i> property.
   </h3>
   <div id="bordrStylUsrEl"> Set the border style here. </div>
   <br>
   <div id="bordrStylUsrBtnWrap">
      <select id="bordrStylUsrSel" size="10">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option/> groove
         <option/> inset
         <option/> none
         <option/> hidden
         <option/> outset
         <option/> ridge
         <option selected = "selected"/> solid
         <option/> inset
         <option/> outset
      </select>
      <br><br>
      <p> Provide the border style and click on the button. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setBorderStyle() {
         var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel");
         var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex;
         var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text;
         var bordrStylUsrBtnWrap = document.getElementById("bordrStylUsrBtnWrap");
         var bordrStylUsrEl = document.getElementById("bordrStylUsrEl");
         bordrStylUsrEl.style.borderStyle = bordrStylUsrSelStat;
         bordrStylUsrEl.innerHTML =
            "You have set the element’s border style to <b>" + bordrStylUsrEl.style.borderStyle + "</b>";
      }
   </script>
</html>

In this tutorial, we went through the borderStyle property in JavaScript. The borderStyle property is a built-in option in JavaScript to set the style of an element's border and is very easy to code.

Updated on: 09-Nov-2022

923 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements