HTML | DOM Style borderTopStyle Property

The DOM Style borderTopStyle property is used to set or return the top border style of an element.

Syntax:

  • To get the borderTopStyleProperty
    object.style.borderTopStyle
  • To set the borderTopStyleProperty
    object.style.borderTopStyle = "none | hidden | dotted | dashed |
    solid | double | groove |ridge | inset | outset | initial | 
    inherit"

Property Values:



Value Effect
none No border is created. This is the default value.
hidden Visually same as ‘none’, 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 Sets the property to its initial value.
inherit Sets the property to inherit from its parent.

These values are demonstrated with the below examples:

Example-1: Using the none value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the 
      style of the border on the top</p>
    
    <div class="item">
      GeeksforGeeks
    </div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'none';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:
none-before

After clicking the button:
none-after

Example-2: Using the hidden value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the
      style of the border on the top</p>
    <div class="item">GeeksforGeeks</div
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'hidden';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:


hidden-after

Example-3: Using the dotted value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the 
      style of the border on the top</p>
    
    <div class="item">GeeksforGeeks</div>
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'dotted';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:

dotted-after

Example-4: Using the dashed value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the
      style of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'dashed';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:


none-before

After clicking the button:

dashed-after

Example-5: Using the solid value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px dotted green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the 
      style of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'solid';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

solid-before

After clicking the button:

solid-after

Example-6: Using the double value.


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'double';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:

double-after

Example-7: Using the groove value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'groove';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:


groove-after

Example-8: Using the ridge value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style 
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'ridge';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:

ridge-after

Example-9: Using the inset value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'inset';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:


none-before

After clicking the button:

inset-after

Example-10: Using the outset value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px inset green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'outset';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

outset-before

After clicking the button:

outset-after

Example-11: Using the initial value.


filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div class="item">GeeksforGeeks</div>
    
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = 'initial';
        }
    </script>
</body>
  
</html>

chevron_right


Output:

Before clicking the button:

none-before

After clicking the button:

initial-after

Example-12: Using the inherit value.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        DOM Style borderTopStyle Property
    </title>
    <style>
        #parent {
            border-top-style: dotted;
            padding: 10px;
        }
          
        .item {
            height: 50px;
            padding: 10px;
            border: 15px solid green;
        }
    </style>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>DOM Style borderTopStyle Property</b>
    <p>Click on the button to change the style
      of the border on the top</p>
    <div id="parent">
        <div class="item">GeeksforGeeks</div>
    </div>
  
    <button onclick="changeBorderTopStyle()">
      Change style
    </button>
  
    <script>
        function changeBorderTopStyle() {
            elem = document.querySelector('.item');
  
            // Setting the border style
            elem.style.borderTopStyle = '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 borderTopStyle property are listed below:

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


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.