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

JavascriptWeb DevelopmentFront End Technology

In this tutorial, we shall learn how to set the style of the left border with JavaScript. To set the style of the left border in JavaScript, use the borderLeftStyle property. Set the style under this property that you want for the border i.e. solid, dashed, etc. Let us discuss our topic in brief.

Using the borderLeftStyl Property

With this property, we can set or return the style of the left border of an element.

Users can follow the syntax below for using this property.

Syntax = style;

This syntax allows the required border style to be set to the element's style.


  • style − Sets the style of the left border. The available style values are explained below in values section.


  • 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 property is none by default. The return value is a string on behalf of the border left style.

Example 1

You can try to run the following code to learn how to style the left border −

<!DOCTYPE html> <html> <head> <style> #box { border: thick solid gray; width: 300px; height: 300px; } </style> </head> <body> <div id="box">Demo Text</div> <br><br> <button type="button" onclick="display()">Set left border style</button> <script> function display() { document.getElementById("box").style.borderLeftStyle= "dashed"; } </script> </body> </html>

Example 2

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

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

<html> <head> <style> #lftBordrUsrEl{ background-color: #FFFFFF; height: 50px; padding-top: 35px; padding-left: 5px; border-left-width: 5px; border-left-color: #D2B48C; } </style> </head> <body> <h3> Setting the left border style using the borderLeftStyl Property</h3> <div id = "lftBordrUsrEl"> Set the left border style here. </div> <br> <div id = "lftBordrUsrBtnWrap"> <select id = "lftBordrUsrSel" size = "10"> <option> dotted </option> <option> dashed </option> <option> double </option> <option> groove </option> <option> inset </option> <option> none </option> <option> hidden </option> <option> outset </option> <option> ridge </option> <option selected="selected"> solid </option> <option> inset </option> <option> outset </option> </select> <br><br> <p> Provide the border left style and click on the button. </p> <button onclick="setLeftBorderStyle();"> Set Left Border </button> </div> <br> </body> <script> function setLeftBorderStyle(){ var lftBordrUsrSelTag=document.getElementById("lftBordrUsrSel"); var lftBordrUsrSelIndx=lftBordrUsrSelTag.selectedIndex; var lftBordrUsrSelStat=lftBordrUsrSelTag.options[lftBordrUsrSelIndx].text; var lftBordrUsrBtnWrap=document.getElementById("lftBordrUsrBtnWrap"); var lftBodrUsrEl=document.getElementById("lftBordrUsrEl");; lftBodrUsrEl.innerHTML="You have set the left border style to <b>" + + "</b>"; } </script> </html>

Example 3

We have set the left border style in this program to a div element. We display the left border style to the user when they click on the button following the syntax for getting the style of the left border.

<html> <head> <style> #lftBordrGetEl{ background-color: #87CEEB; height: 100px; padding-top:70px; border-left-width: 10px; border-left-color: #708090; } </style> </head> <body> <p> Getting the style of the left border using the borderLeftStyle property.</p> <div id="lftBordrGetEl" style="border-left-style: dotted">Get the left border style of this element. </div> <br> <div id="lftBordrGetBtnWrap"> <p> Click on the button to get the style. </p> <button onclick="getLeftBorderStyle();"> Get </button> </div> <br> <p id="lftBordrGetOp"> </p> </body> <script> function getLeftBorderStyle(){ var lftBordrGetBtnWrap=document.getElementById("lftBordrGetBtnWrap"); var lftBordrGetEl=document.getElementById("lftBordrGetEl"); var lftBordrGetOp=document.getElementById("lftBordrGetOp"); lftBordrGetOp.innerHTML="The left border style is=<b>" + + "</b>"; } </script> </html>

In this tutorial, we went through the borderLeftStyle property in JavaScript. To set the left border style, this property is built-in in JavaScript and very easy to code.

Updated on 22-Nov-2022 07:33:53