Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | border-width Property

  • Last Updated : 22 Aug, 2021

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;
  • border-left-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: green">
            GeeksforGeeks
        </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 a uniform thick
        border around it. -->
        <div style="border-width: thick">
            This div has a thick border.
        </div>
    </body>
</html>                   

Output: 

border-width with one value

Example 2: This example contains two value of border-width. 
border-width: val1 val2;  

  • border-top-width: val1;
  • border-right-width: val2;
  • border-bottom-width: val1;
  • 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: green">
            GeeksforGeeks
        </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: 

border-width with two values

Example 3: This example sets border-width to three value. 
border-width: val1 val2 val3;  

  • border-top-width: val1;
  • border-right-width: val2;
  • 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: green">GeeksforGeeks</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:

border-width with three values



Example 4: This example contains four value to border-width property. 
border-width: val1 val2 val3 val4;  

  • border-top-width: val1;
  • border-right-width: val2;
  • border-bottom-width: val3;
  • border-left-width: val4;

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </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 = "border-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,
        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: 

border-width with four values

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

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>
            border-width property
        </title>
         
        <style>
            div {
                margin-bottom: 10px;
                border-style: solid;
            }
        </style>
    </head>
     
    <body>
        <h1 style="color: green">
            GeeksforGeeks
        </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 border width,
            which is the medium border.
        </div>
    </body>
</html>                   

Output: 

border-width initial

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: green">
            GeeksforGeeks
        </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: 

border-width inherit

Supported Browsers: The browser supported by border-width property are listed below: 

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

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :