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

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

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.

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

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

html

<!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 1
Edge 12
Internet Explorer 5.5
Firefox 1
Opera 9.2
Apple Safari 1

HTML | DOM Style borderTopStyle Property

Explore