Open In App

HTML | DOM Style borderTopWidth Property

Last Updated : 09 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The Style borderTopWidth property in HTML DOM is used to set or return the width of the top border of an element

Syntax:

  • To get the borderTopWidth Property
object.style.borderTopWidth
  • To set the borderTopWidth Property
object.style.borderTopWidth = "thin | medium | thick | length |
initial | inherit"

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

Property Values:

1. thin: This is used to define a thin top border. 

Example: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
 
    <style>
        .elem {
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style BorderTopWidth
    </b>
    <p class="elem">
      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="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = 'thin';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button:

 thin-before 

After clicking the button:

 thin-after

2. medium: This is used to define a medium top border. This is the default value. 

Example: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
    <style>
        .elem {
            border: thick solid;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style BorderTopWidth
  </b>
    <p class="elem">
      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="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = 'medium';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button: 

medium-before 

After clicking the button: 

medium-after

3. thick: This is used to define a thick top border. 

Example-3: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
 
    <style>
        .elem {
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style BorderTopWidth
  </b>
    <p class="elem">
      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="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = 'thick';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button:

 thick-before 

After clicking the button: 

thick-after

4. length: This is used to define the top border width in terms of length units. 

Example-4: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
 
    <style>
        .elem {
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
  </h1>
    <b>
      DOM Style BorderTopWidth
    </b>
    <p class="elem">
      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="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = '10px';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button:

 length-before 

After clicking the button:

 length-after

5. initial: This is used to set this property to its default value. 

Example-5: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
 
    <style>
        .elem {
            border-style: solid;
            padding: 10px;
            border-top-width: 2px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style BorderTopWidth
    </b>
    <p class="elem">
      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="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = 'initial';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button: 

initial-before 

After clicking the button:

 initial-after

6. inherit: This inherits the property from its parent. 

Example-6: 

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
      DOM Style BorderTopWidth
    </title>
 
    <style>
        #parent {
            padding: 10px;
            border-style: solid;
            /* Setting the borderTopWidth
             of the parent */
            border-top-width: 15px;
        }
         
        .elem {
            border-style: solid;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <b>
      DOM Style BorderTopWidth
    </b>
    <br>
    <br>
    <div id="parent">
        <p class="elem">
          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>
    <br>
    <button onclick="changeWidth()">
      Change borderTopWidth
    </button>
 
    <!-- Script to change borderTopWidth -->
    <script>
        function changeWidth() {
            elem = document.querySelector('.elem');
            elem.style.borderTopWidth = 'inherit';
        }
    </script>
</body>
 
</html>


Output: 

Before clicking the button:

 inherit-before 

After clicking the button:

 inherit-after

Supported Browsers: The browser supported by borderTopWidth property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 3.5
  • Apple Safari 1


Similar Reads

HTML DOM Style backgroundClip Property
The DOM style backgroundClip Property is used to set or return the painting area of the background. Syntax: It is used to return the backgroundClip property.object.style.backgroundClip It is used to set the backgroundClip property. object.style.backgroundClip = "border-box|padding-box|content-box|initial|inherit" Property Values: border-box propert
1 min read
HTML DOM Style borderTop Property
The DOM style borderTop property is used to set or return the three different border-top property such as border-top-width, border-top-style, and border-top-color of an element. Syntax: It returns the borderTop property. object.style.borderTopIt is used to set the borderTop property. object.style.borderTop = "width style color|initial|inherit" Prop
2 min read
HTML | DOM Style columnGap Property
The DOM Style columnGap property specifies the gap between the columns. Syntax : For return the value: object.style.columnGap For set the value: object.style.columnGap = "length|normal|initial|inherit" Property Values: length: Set the column gap in length unit. normal: The default value of column gap. initial: Sets the default value. inherit: Inher
4 min read
HTML DOM Style boxSizing Property
The DOM Style boxSizing property is used to set or return how an object should be made to fit an element taking into consideration its padding, border, and content. This property can be useful when fitting elements into their desired position by automatically calculating their dimensions. Syntax: It returns the boxSizing Property:object.style.boxSi
5 min read
HTML | DOM Style borderImageSource Property
The DOM Style borderImageSource Property is used to set or return the image to be used instead of the styles given by the border-style property. Syntax: To get the borderImageSource propertyobject.style.borderImageSourceTo set the borderImageSource propertyobject.style.borderImageSource = "none | image | initial | inherit" Return Values: It returns
3 min read
HTML | DOM Style wordBreak Property
The DOM Style wordBreak Property is used to set or return the word-break property. The word-break property is used to specify how to break the word when the word is reached at the end of the line. The line breaks in the text can occur in a certain wordBreak property. Syntax: It is used to return the wordbreak Property:object.style.wordBreak It is u
2 min read
HTML | DOM Style pageBreakBefore Property
The pageBreakBefore property in HTML DOM is used to set or return the page-break-before characteristics before the specified element in HTML document. This property works in print and print preview mode. The pageBreakBefore property has no effect on absolutely positioned elements in the HTML DOM. The page break before attribute can only be effected
2 min read
HTML | DOM Style borderImageOutset Property
In the Style borderImageOutset Space which contains the border, image is to be painted is called the border-image space. By default, the boundaries of the border image area match with the boundaries of the element’s border-box. However, these boundaries can be extended using the border-image-outset property.The border-image-outset property specifie
4 min read
HTML | DOM Style maxHeight Property
The maxHeight property set/return the maximum height of an element. The maxHeight property affect only on block-level elements, absolute or fixed position elements. Syntax: It is used to set the maxHeight property:object.style.maxHeight = "none|length|%|initial|inherit"It is used to return the maxHeight property:object.style.maxHeight Return Values
2 min read
HTML | DOM Style columnRuleWidth Property
The Style columnRuleWidth property in HTML DOM is used to define or determine the width of the rule between the columns. Syntax: It returns the columnRuleWidth property.object.style.columnRuleWidthIt is used to set columnRuleWidth property.object.style.columnRuleWidth = "medium|thin|thick|length| initial|inherit" Property Values: thin: It is used t
3 min read
Article Tags :