Skip to content
Related Articles

Related Articles

Improve Article

CSS | border-top-width Property

  • Last Updated : 03 Jan, 2019

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:




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

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