CSS border-width Property

The CSS border-width property sets the width of an element's border. It applies to all four sides simultaneously. You can also set the width for each side individually using the following longhand properties:

border-top-width, which defines the width of an element’s top border.
border-left-width, which defines the width of an element’s left border.
border-right-width, which defines the width of an element’s right border.
border-bottom-width, which defines the width of an element’s bottom border.

Info

The border-style property defaults to none. If you do not specify a border style, the border width will not be visible.

This property accepts one to four values. A single value applies to all four sides. Two values apply to the top/bottom and left/right sides, respectively. Three values apply to the top, left/right, and bottom sides. Four values apply to the top, right, bottom, and left sides in order.

Initial Value	medium
Inherited	No
Animatable	Yes. The width of the border is animatable.
Version	CSS1
JavaScript Syntax	object.style.borderWidth = "1px 5px";

Syntax

Syntax of CSS border-width Property

border-width: <line-width>{1,4} | initial | inherit;

Example of the border-width property:

Example of CSS border-width Property

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-style: solid;
        border-width: 1px;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>This paragraph's border width is set to 1px.</p>
  </body>
</html>

Try it Yourself »

Example of the border-width property with three values:

Example of CSS border-width Property with px and medium values

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: #666;
        padding: 5px;
        border-style: solid;
      }
      .thin {
        border-width: 1px;
      }
      .medium {
        border-width: medium;
      }
      .thick {
        border-width: 10px;
      }
    </style>
  </head>
  <body>
    <p class="thin">This paragraph's border width is set to 1px.</p>
    <p class="medium">This paragraph's border width is set to medium.</p>
    <p class="thick">This paragraph's border width is set to 10px.</p>
  </body>
</html>

Try it Yourself »

Result

Values

Value	Description	Play it
medium	Defines a medium border. This is the default value. (Relative keyword with browser-defined pixel values.)	Play it »
thin	Defines a thin border.	Play it »
thick	Defines a thick border.	Play it »
length	Defines the thickness of border.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Practice

Which of the following values can be used to specify the width of CSS borders?