Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Style borderLeftStyle Property

  • Last Updated : 30 Jul, 2019

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:

ValueEffect
noneNo border is created. It is the default value.
hiddenIt is same as ‘none’ property, except it helps during border conflict resolution in table elements.
dottedDots are used as the border.
dashedA dashed line is used as the border.
solidA single solid line is used as the border.
doubleTwo lines are used as the border.
grooveA 3D grooved border is displayed. The effect depends on border-color value.
ridgeA 3D ridged border is displayed. The effect depends on border-color value.
insetA 3D inset border is displayed. The effect depends on border-color value.
outsetA 3D outset border is displayed. The effect depends on border-color value.
initialIt sets the property to its initial value.
inheritIt sets the property to inherit from its parent.

Example 1: This example describes none property value.




<!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>                    

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



Example 2: This example describes hidden property value.




<!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>                    

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

Example 3: This example describes dotted property value.




<!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>                    

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

Example 4: This example describes dashed property value.




<!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>                    

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

Example 5: This example describes solid property value.




<!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>                    

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



Example 6: This example describes double property value.




<!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>                    

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

Example 7: This example describes groove property value.




<!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>                    

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

Example 8: This example describes ridge property value.




<!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>                    

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

Example 9: This example describes inset property value.




<!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>                    

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

Example 10: This example describes outset property value.




<!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>                    

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

Example 11: This example describes initial property value.




<!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>                    

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

Example 12: This example describes inherit property value.




<!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>                    

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

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :