HTML | DOM Style borderLeftStyle Property

The Style borderLeftStyle property in HTML DOM is used to set or return the left border style of an element.

Syntax:

  • It returns the borderLeftStyle property.
    object.style.borderTopStyle
  • It is used to set the borderLeftStyle property.
    object.style.borderLeftStyle = "none|hidden|dotted|dashed|solid|
    double|groove|ridge|inset|outset|initial|inherit"

Property Values:

Value Effect
none No border is created. It is the default value.
hidden It is same as ‘none’ property, except it helps during border conflict resolution in table elements.
dotted Dots are used as the border.
dashed A dashed line is used as the border.
solid A single solid line is used as the border.
double Two lines are used as the border.
groove A 3D grooved border is displayed. The effect depends on border-color value.
ridge A 3D ridged border is displayed. The effect depends on border-color value.
inset A 3D inset border is displayed. The effect depends on border-color value.
outset A 3D outset border is displayed. The effect depends on border-color value.
initial It sets the property to its initial value.
inherit It sets the property to inherit from its parent.

Example 1: This example describes none property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'none';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
none-before
After clicking the button:
none-after

Example 2: This example describes hidden property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
      
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'hidden';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
hidden-before
After clicking the button:
hidden-after

Example 3: This example describes dotted property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
      
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'dotted';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
dotted-before
After clicking the button:
dotted-after

Example 4: This example describes dashed property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'dashed';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
dashed-before
After clicking the button:
dashed-after

Example 5: This example describes solid property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px dotted green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'solid';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
solid-before
After clicking the button:
solid-after

Example 6: This example describes double property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'double';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
double-before
After clicking the button:
double-after

Example 7: This example describes groove property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'groove';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
groove-before
After clicking the button:
groove-after

Example 8: This example describes ridge property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
      
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'ridge';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
ridge-before
After clicking the button:
ridge-after

Example 9: This example describes inset property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
      
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'inset';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
inset-before
After clicking the button:
inset-after

Example 10: This example describes outset property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px inset green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'outset';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
outset-before
After clicking the button:
outset-after

Example 11: This example describes initial property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
      
    <b>DOM Style borderLeftStyle Property</b>
      
    <p class="item">
        GeeksforGeeks is a computer science 
        portal with a huge variety of well 
        written and explained computer science 
        and programming articles, quizzes and 
        interview questions.
    </p>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'initial';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
initial-before
After clicking the button:
initial-after

Example 12: This example describes inherit property value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        DOM Style borderLeftStyle Property
    </title>
      
    <style>
        #parent {
            border-left-style: dotted;
            padding: 10px;
        }
  
        .item {
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderLeftStyle Property</b>
      
    <div id="parent">
        <p class="item">
            GeeksforGeeks is a computer science 
            portal with a huge variety of well 
            written and explained computer 
            science and programming articles, 
            quizzes and interview questions.
        </p>
    </div>
      
    <button onclick="changeBorderStyle()">
        Change style
    </button>
  
    <script>
        function changeBorderStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderLeftStyle = 'inherit';
        }
    </script>
</body>
  
</html>                    

chevron_right


Output:
Before clicking the button:
inherit-before
After clicking the button:
inherit-after

Supported Browsers: The browser supported by DOM Style borderLeftStyle property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.