What is Border-Width Property in CSS

The border-width property in CSS asserts the border width of the border of an element. Each of the sides may be distinctively using border-top width, border,bottom-width, border-right-width and the border -left-width property.

The border-width property in CSS is used to set the border width of all the four sides of an element. The border-width property is the combination of four property

Default Value:

  • medium

Syntax:

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

Property Values:

  • 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 1: This example set border-width to single value to all sides.

border-width:val;

  • border-top-width: val;
  • border-right-width: val;
  • border-bottom-width: val;

HTML

<!DOCTYPE html>
<html>
     <head>
         <title>
             border-width property
          </title>
            
           <style>
               div {
                   margin-bottom: 10px;
                   border-style: solid;
               }
            </style>
          </head>
     
          <body>
              <h1 style="color: red">
                    CodeOne
                    </h1>

         <p>border-width property: [value]</p>


         <!-- This div has a uniform border
          of 10px around it. -->
         <div style="border-width: 10px">
              This div has a border around it of 10px.
         </div>

         <!-- This div has a uniform thin border
           around it.-->
         <div style="border-width: thin">
              This div has a thin border.
         </div>

         <!--This div has a uniform medium border
             around it. -->
         <div style="border-width: medium">
              This div has a medium border.
         </div>

         <!-- This div has uniform thick border
          around it.-->
         <div style="border-width: thick">
              This div has a thick border.
         </div>
       </body>
      </html>


 

Output:

Example 2:

This example contains two value of border -width.

border-width: val 1 val 2;

  • border-top-width: val 1;
  • border-right-width:val 2;
  • border-bottom-width: val 1;
  • border-left-width: val 2;

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>
              border-width property
          </title>

          <style>
              div {
                  margin-bottom: 10px;
                  border-style: solid;
                }
           </style>
          </head>

          <body>
              <h1 style = "color: red">
                       CodeOne
               </h1>

          <p>border-width property: [value] [value]</p>

           <!-- This div has a 5px border on the top and
            bottom, and 30px on the left and right.-->
           <div style = "border-width: 5px 30px">
                This div has a border of 5px on the top and
                bottom, and 30px on the left and right.
           </div>

           <!-- This div has a thin border on the top and
             bottom, and thick on the left and right.  -->
             <div style = "border-width:thin thick">
                  This div has a thin border on the top and bottom,
                  and thick border on the left and right.
             </div>
            </body>
            </html>

                 

Output:

Example 3: This example sets border-width to three value.

border-width: val 1 val2 val3;

  • border-top-widht: val 1;
  • border-right-width: val 2;
  • border-bottom-width: val3;
  • border-left-width: val2;

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>
              border-width property
          </title>

          <style>
               div {
                   margin-bottom: 10px;
                   border-style: solid;
                 }
           </style>
          </head>
  
          <body>
             <h1 style="color:red">CodeOne</h1>
       
  <p>
            border-width property: [value] [value] [value]
          </p>

          <!-- This div has a 5px border on the top, 30px
           on the left and right, and 15px on the bottom. -->
          <div style="border-width:5px 30px 15px">
               This div has a 5px border on the top, 30px on
               the left and right, and 15px on the bottom.
           </div>

          <!-- This div has a thin border on the top, a thick
           border on the left and right, and a medium border
           on the bottom. -->
          <div style="border-width: thin thick medium">
               This div has a thin border on the top, a thick
               border on the left and right, and a medium
               border on the bottom.
              </div>
            </body>
          </html>

Output:

Example 4: This example contains four value to border-width propery.

border-width: val 1 val 2 val 3 val 4;

  • border-top-width: val 1;
  • border-right-width: val 2;
  • border-bottom-width: val 3;
  • border-left-width: val 4;

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>
              border-width property
           </title>
   
           <style>
               div {
                   margin-bottom: 10px;
                   border-style: solid;
                 }

           </style>
          </head>
          <body>
              <h1 style="color:red">
                      CodeOne
               </h1>
     <p>
          border-width property:
          [value] [value] [value] [value]
         </p>

         <!-- This div has a border of 5px on the top,
          30px on the right, 15px on the bottom, and 
          2px on the left. -->
          <div style="borer-width:5px 30px 15px 2px">
               This div has a border of 5px on the top,
               30px on the right, 15px on the bottom,
               and 2px on the left.
         </div>

         <!-- This div has a thin border on the top,   
          30px on the right, 15px on the bottom, and
          2px on the left. -->
         </div>
   
         <!-- This div has a thin borer on the top,
          thick border on right, medium border on the
          bottom, and thin border on the left. -->
          <div style-"border-width: thin thick medium thin">
               This div has a thin border on the top, thick
               border on right, medium border on the bottom,
               and thin border on the left.
             </div>
           </body>
         </html>
               
 

Output:

Example 5: This example describes the initial value of border-width property.

HTML

<!DOCTYPE html>
<html>
     <head>
          <head>
               <title>
                   border-width propety
                </title>
  
                <style>
                     div {
                         margin-bottom: 10px;
                         border-style: solid;
                      }
                 </style>
                </head>
      
                <body>
                     <h1 style="color: red">
                            CodeOne
                      </h1>

            <p>border-width property: initial</p>

                    <!-- This div has the border width set
                     to initial.  -->
                    <div style="border-width: initial">
                         This div has the default borer width,
                         which is the medium border.
                       </div>
                      </body>
                     </html>

Output:

Example 6: This example describes the inherit property.

HTML

<!DOCTYPE html>
<html>
     <head>
          <title>
              border-width property
           </title>
   
           <style>
                div {
                    margin: 10px;
                    border-style: solid;
                 }
            </style>
           </head>

            <body>
                <h1 style="color: red">
                         CodeOne
                 </h1>

       <p>border-width property : inherit</p>

                <!-- This div is the parent with the border 
                 width set to thick. -->
                <div id="parent" style="border-width: thin">
                     This is the parent div.

                <!-- This div inherits the border width
                 from the parent div.  -->
                <div style="border-width: inherit">
                     This div inherits the border width
                     from the parent.
                 </div>   
                </div>
               </body>
              </html>

Output:

Leave a Reply

Your email address will not be published.