Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Style borderTopStyle Property

  • Last Updated : 21 Oct, 2021

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

Syntax:

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

  • 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"

Return Values: It returns a string value, which representing the style of an element’s top border.

Property Values:



ValueEffect
noneNo border is created. This is the default value.
hiddenVisually same as ‘none’, 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.
initialSets the property to its initial value.
inheritSets the property to inherit from its parent.

These values are demonstrated with the below examples:

Example-1: Using the none value.




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

Output:

Before clicking the button:
none-before

After clicking the button:
none-after

Example-2: Using the hidden value.




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

Output:

Before clicking the button:



none-before

After clicking the button:

hidden-after

Example-3: Using the dotted value.




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

Output:

Before clicking the button:

none-before

After clicking the button:

dotted-after

Example-4: Using the dashed value.






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

Output:

Before clicking the button:

none-before

After clicking the button:

dashed-after

Example-5: Using the solid value.




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

Output:

Before clicking the button:

solid-before

After clicking the button:



solid-after

Example-6: Using the double value.




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

Output:

Before clicking the button:

none-before

After clicking the button:

double-after

Example-7: Using the groove value.




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

Output:

Before clicking the button:



none-before

After clicking the button:

groove-after

Example-8: Using the ridge value.




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

Output:

Before clicking the button:

none-before

After clicking the button:

ridge-after

Example-9: Using the inset value.






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

Output:

Before clicking the button:

none-before

After clicking the button:

inset-after

Example-10: Using the outset value.




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

Output:

Before clicking the button:

outset-before

After clicking the button:



outset-after

Example-11: Using the initial value.




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

Output:

Before clicking the button:

none-before

After clicking the button:

initial-after

Example-12: Using the inherit value.




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

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
Recommended Articles
Page :

Start Your Coding Journey Now!