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:

CSS border-width with Multiple Values

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

border-width with Four Values

border-width with Three Values

border-width with Two Values

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 »