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

Last Updated : 24 May, 2023

In this article, we will see how to set the style of the bottom border using JavaScript. To set the border-bottom of an element using JavaScript, we will use the borderBottomStyle property.

The style borderBottomStyle property is used to set or return the style of the bottom border of an element.

Approach 1: In this approach, we will add the border-bottom style using JavaScript. To apply this, first we created a div element and add some CSS styles including border style, and then use JavaScript document.querySelector() to select the element and apply CSS style after the button click.

Syntax:

document.querySelector("Selector").style.borderBottomStyle = styleName;

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        How to set the style of bottom 
        border with JavaScript?
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        .content {
            width: 350px;
            padding: 50px 0;
            margin: auto;
            border: 4px solid green;
        }
 
        input[type="button"] {
            padding: 5px 10px;
            margin-top: 10px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        How to set the style of bottom 
        border with JavaScript?
    </h3>
 
    <div class="content">
        Change border bottom of 
        this div element
    </div>
     
    <input type="button"
        value="Change Border Bottom"
        onclick="myGeeks()" >
 
    <script>
        function myGeeks() {
            document.querySelector(".content")
                .style.borderBottomStyle = "dashed";
        }
    </script>
</body>
</html>

Output:

Approach 2: In this approach, we will add multiple border styles on the bottom border using JavaScript. First, we created a div element and add some CSS styles including border style to the div element. Then use JavaScript document.querySelector() to select the element and apply CSS styles after the button click.

Syntax:

let styles = `
    border-bottom: dotted;
    border-bottom-color: blue;
    border-bottom-width: 10px;`

document.querySelector(".content").style = styles;

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        How to set the style of bottom 
        border with JavaScript?
    </title>
 
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        .content {
            width: 350px;
            padding: 50px 0;
            margin: auto;
            border: 4px solid green;
        }
 
        input[type="button"] {
            padding: 5px 10px;
            margin-top: 10px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        How to set the style of bottom 
        border with JavaScript?
    </h3>
 
    <div class="content">
        Change border bottom of 
        this div element
    </div>
     
    <input type="button"
        value="Change Border Bottom"
        onclick="myGeeks()" >
 
    <script>
        let styles = `
        border-bottom: dotted;
        border-bottom-color: blue;
        border-bottom-width: 10px;`
        function myGeeks() {
            document.querySelector(".content").style = styles;
        }
    </script>
</body>
</html>