CSS border-width (Set/Change Width of a Border)

The CSS border-width property is used to define the width of the border around an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border-style: solid; border-width: 10px;}
   </style>
</head>
<body>

   <p>This is para one.</p>
   
</body>
</html>

Output

This is para one.

Note - To define the width of a border, a border must to be exist. Therefore, border-style property must be defined to create a border, before defining the width.

CSS border-width Syntax

The syntax of border-width property in CSS, is:

border-width: x;

The value of x should be any of the following:

thin - used to define thin top border
medium - used to define medium top border
thick - used to define thick top border
length - used to define custom size top border
initial - used to define the default value for the size of top border
inherit - used to inherit the value from its parent

CSS border-width with Multiple Values

We can also define the border-width property with multiple values.

border-width with Four Values

First value applies to top border
Second value applies to right border
Third value applies to bottom border
Fourth value applies to left border

border-width with Three Values

First value applies to top border
Second value applies to right and left border
Third value applies to bottom border

border-width with Two Values

First value applies to top and bottom border
Second value applies to right and left border

For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border-style: solid; border-color: chocolate; padding: 16px;}
      p#a {border-width: 10px 20px 30px 40px;}
      p#b {border-width: 10px 20px 30px;}
      p#c {border-width: 10px 20px;}
      p#d {border-width: 10px;}
   </style>
</head>
<body>

   <p id="a">This is para one.</p>
   <p id="b">This is para two.</p>
   <p id="c">This is para three.</p>
   <p id="d">This is para four.</p>
   
</body>
</html>

Output

This is para one.

This is para two.

This is para three.

This is para four.

The border-width with four values is used to define following four properties at once:

CSS Online Test

« Previous Tutorial Next Tutorial »