What is 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 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

html

<!DOCTYPE html>
<html>
     <head>
         <title>
             border-top-width property 
          </title>
  
           <style>
                #thin {
                    border-color: red;
                    border-top-style: solid;
                    border-top-width: thin;
                }
                #medium {
                    border-color: red;
                    border-top-style: solid;
                    border-top-width: medium;
                }
                #thick {
                     border-color: red;
                     border-top-style: solid;
                     border-top-width:thick;
                }
                #length {
                    border-color: red;
                    border-top-style: solid;
                    border-top-width: 20px;
                }
                #initial {
                     border-color: red;
                     border-top-style: solid;
                     border-top-width: initial;
                }
             </style>
           </head>
   
           <body style= "text-align-center">
       
               <h1 style = "color: red">CodeOne</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:

Leave a Reply

Your email address will not be published.