CSS | border-top-width Property

The border-top-width property in CSS is used to set a specific width to the top border of an element. The border-top-style or border-style property is used for the element before using the border-top-width property.

Syntax:

border-top-width: length|thin|medium|thick|initial|inherit;

Property Values: The border-top-width property values are listed below:

  • length: It is used to set the width of the border. It does not takes negative value.
  • thin: It is used to set the thin border at the top of element.
  • medium: It is used to set medium sized top border. It is the default value.
  • thick: It is used to set the thick top border.
  • initial: It is used to set the border-top-width to its default value.
  • inherit: This property is inherited from its parent.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title
            border-top-width property 
        </title
          
        <style
            #thin { 
                border-color: green; 
                border-top-style: solid; 
                border-top-width: thin; 
            
            #medium { 
                border-color: green; 
                border-top-style: solid; 
                border-top-width: medium; 
            
            #thick { 
                border-color: green; 
                border-top-style: solid; 
                border-top-width:thick; 
            
            #length { 
                border-color: green; 
                border-top-style: solid; 
                border-top-width: 20px; 
            
            #initial { 
                border-color: green; 
                border-top-style: solid; 
                border-top-width: initial; 
            
        </style
    </head
      
    <body style = "text-align:center"
      
        <h1 style = "color:green">GeeksforGeeks</h1
      
        <h3>border-top-width property</h3
          
        <div id="thin"
            border-top-width: thin; 
        </div><br><br
          
        <div id="medium"
            border-top-width: medium; 
        </div><br><br
          
        <div id="thick"
            border-top-width: thick; 
        </div><br><br
          
        <div id="length"
            border-top-width: length; 
        </div><br><br
          
        <div id="initial"
            border-top-width: initial; 
        </div
    </body
</html>                                 

chevron_right


Output:

Browser Support: The browser supported by border-top-width property are listed below:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Opera 3.5
  • Safari 1.0
  • Firefox 1.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.