CSS Property border-width








border-width shorthand property sets the width for the overall border of an element or for each side individually.

Summary

ItemValue
Initial value
Inherited No.
Version CSS1
JavaScript syntax object.style.borderWidth="thin thick"
Applies to All elements.




CSS Syntax

border-width: width [ width width width]

where width is 

  non-negative length | medium | thick | thin | inherit

border-width can have one to four values.

border-width:thin medium thick 10px;

is equal to

  • top border is thin
  • right border is medium
  • bottom border is thick
  • left border is 10px
border-width:thin medium thick;

is equal to

  • top border is thin
  • right and left borders are medium
  • bottom border is thick
border-width:thin medium;

is equal to

  • top and bottom borders are thin
  • right and left borders are medium
border-width:thin;

is equal to all four borders are thin.





Property Values

The property values are listed in the following table.

Value Description
thin thin border
medium medium border. Default
thick thick border
length Set the thickness of the border
inherit Inherit the border width from the parent element

Browser compatibility

border-width Yes Yes Yes Yes Yes

Example

An example showing how to use border-width CSS property. 


<!DOCTYPE HTML>
<html>
    <head>
        <style>
            div {<!--   w  w w.ja  va 2 s  .c o m-->
                padding: 3px;
                border-color: black;
                border-style: solid;
                background: mistyrose;
                margin: 5px;
                border-width: thin;
            }
     
        </style>
    </head>
    <body>
        <div>thin</div>
    </body>
</html>

The code above is rendered as follows:

Example 2

The following css uses the pixel to define the border width.


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!--  w  w w .ja  va  2 s .  c  o m-->
            border-width: 5px; 
            border-style: solid; 
            border-color: black; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
            java 2s .com
        </p> 
    </body> 
</html>

The code above is rendered as follows:

Example 3

The following css uses the percentage to define the border width


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!--from   w w w  .j a va  2 s .  c o  m-->
            border-width: 50%; 
            border-style: solid; 
            border-color: black; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
        </p> 
    </body> 
</html>

The code above is rendered as follows:

Example 4

The following code uses cm to define the border width


<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        p { <!-- w ww. jav a 2s .c om-->
            border-width: 1cm; 
            border-style: solid; 
            border-color: black; 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
        </p> 
    </body> 
</html>

The code above is rendered as follows:

Set Border width in one, two, three or four values

The following code shows how to set Border width in one, two, three or four values. 


<!DOCTYPE HTML>
<html>
<head>
<style rel='stylesheet' type='text/css'>
div {<!-- w w w. jav a2  s. c  om-->
    padding: 3px;
    border-color: khaki;
    border-style: solid;
    background: lightyellow;
    margin: 5px;
    float: left;
    width: 80px;
    height: 80px;
}
div#one {
    border-width: 8px;
}
div#two {
    border-width: 2px 8px;
}
div#three {
    border-width: 2px 8px 16px;
}

div#four {
    border-width: 2px 8px 16px 32px;
}
</style>
</head>
<body>
    <div id='one'>border-width: 8px;</div>
    <div id='two'>border-width: 2px 4px;</div>
    <div id='three'>border-width: 2px 4px 8px;</div>
    <div id='four'>border-width: 2px 4px 8px 10px;</div>
    
</body>
</html>

The code above is rendered as follows:

Set Border Width to thin medium or thick

The following code shows how to set Border Width to thin medium or thick. 


<html>
<head>
<style rel='stylesheet' type='text/css'>
div {<!--from   w w w.  java 2 s. c o  m-->
    padding: 3px;
    border-color: black;
    border-style: solid;
    background: mistyrose;
    margin: 5px;
}
div#thin {
    border-width: thin;
}
div#medium {
    border-width: medium;
}

div#thick {
    border-width: thick;
}
</style>
</head>
<body>
    <div id='thin'>thin</div>
    <div id='medium'>medium</div>
    <div id='thick'>thick</div>
</body>
</html>

The code above is rendered as follows: