CSS - border-width Property

Quiz

CSS border-width is a shorthand property used to set the width of the four border sides of an element. The property accepts upto four values, so depending on the number of values passed, the correspoding borders' width will be affected. The border-style property must be declared to use this property.

Syntax

border-width: medium | thin | thick | length | initial | inherit;

Property Values

Value	Description
medium	It specifies medium width of border. Default.
thin	It specifies a thin border.
thick	It specifies a thick border.
length	Thickness can be given in the form of value.
initial	This sets the property to its default value.
inherit	This inherits the property from the parent element.

Examples of CSS Border Width Property

The following examples explain the border-width property with values.

Border Width Property with Medium Value

To set a medium width to the borders, we can use the medium value. In the following example, medium value has been used for the border-width property.

Example

    <!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray;
         border-style: solid;
         border-width: medium;
      }

      .border {
         border: 1px solid #e74c0c;
         border-width: medium;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'medium' 
         border-width.
      </h2>
      <p class="properties border">
         This border has a 'medium' 
         border-width.
      </p>
   </div>
</body>

</html>

Border Width Property with Thin Value

To set a small width to the borders, we can use the thin value. In the following example, thin value has been used for the border-width property.

Example

 <!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-style:solid;
         border-width: thin;
      }

      .border {
         border: 3px solid #e74c0c;
         border-width: thin;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'thin' 
         border-width.
      </h2>
      <p class="properties border">
         This border has a 'thin' 
         border-width.
      </p>
   </div>
</body>

</html>

Border Width Property with Thick Value

To set a thick width to the borders, we can use the thick value. In the following example, thick value has been used for the border-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-style:solid;
         border-width: thick;
      }

      .border {
         border: 1px solid #e74c0c;
         border-width: thick;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 'thick' 
         border-width.
      </h2>
      <p class="properties border">
         This border has a 'thick' 
         border-width.
      </p>
   </div>
</body>

</html>

Border Width Property with Length Values

To set the width of the borders, we can specify the width using length values (eg. 10px, 15px etc.). In the following example, length values have been used for the border-width property.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
      }

      .heading {
         background-color:lightgray; 
         border-style:solid;
         border-width: 10px;
      }

      .border {
         border: 1px solid #e74c0c;
         border-width: 10px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <h2 class="properties heading">
         This heading has a 10px 
         border-width.
      </h2>
      <p class="properties border">
         This border has a 10px 
         border-width.
      </p>
   </div>
</body>

</html>

Border Width Property with Different Width

To let the borders have different border-width, we can specify different number of values to the property. The following example shows this.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: block;
         align-items: center;
         justify-content: center;
      }

      .properties {
         padding: 10px;
         text-align: center;
         background-color: lightgreen;
         border-style: solid;
      }

      .heading1 {
         border-width: 5px;
      }

      .heading2 {
         border-width: 5px 20px;
      }

      .heading3 {
         border-width: 5px 10px 20px;
      }

      .heading4 {
         border-width: 5px 10px 15px 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-top-width property
   </h2>
   <div class="container">
      <p>
         Single Value: Single value applies to all
         four borders.
      </p>
      <h2 class="properties heading1">
         This heading has a 5px border-width
      </h2>
      <p>
         Two Values: first value applies
         to top and bottom borders, second
         value applies to left and right borders.
      </p>
      <h2 class="properties heading2">
         This heading has 5px 20px border-width
      </h2>
      <p>
         Three Values: first value applies to top,
         second value to left and right borders and
         third value to bottom border.
      </p>
      <h2 class="properties heading3">
         This heading has 5px 10px 20px border-width
      </h2>
      <p>
         Four Values: first value applies to top border,
         second value to right border, third to bottom
         border and fourth to left border.
      </p>
      <h2 class="properties heading4">
         This heading has 5px 10px 15px 20px border-width
      </h2>
   </div>
</body>

</html>

Supported Browsers

Property
border-width	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page