CSS | border-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

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;
filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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;
filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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;
filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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;
filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
border-width with four values

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 widht set 
        to initial. -->
        <div style="border-width: initial">
            This div has the default border width,
            which is the medium border.
        </div>
    </body>
</html>                    

chevron_right


Output:
border-width initial

Example 6: This example describes the inherit property.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

Technical Writer Lets have an update

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.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.