CSS - border-left-width Property

Quiz

CSS border-left-width property determines the width of the left border of an element. The border-left-style must be declared before using this property.

Syntax

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

Property Values

Value	Description
medium	It specifies medium width of left border. Default.
thin	It specifies a thin left border.
thick	It specifies a thick left 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 left Width Property

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

Border left Width Property with Medium Value

To set a medium width to the left border, we can use the medium value. In the following example, medium value has been used for the border-left-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-left-style:solid;
         border-left-width: medium;
      }

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

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

</html>

Border left Width Property with Thin Value

To set a small width to the left border, we can use the thin value. In the following example, thin value has been used for the border-left-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-left-style:solid;
         border-left-width: thin;
      }

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

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

</html>

Border left Width Property with Thick Value

To set a thick width to the left border, we can use the thick value. In the following example, thick value has been used for the border-left-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-left-style:solid;
         border-left-width: thick;
      }

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

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

</html>

Border left Width Property with Length Values

To set the width of the left border, we can specify the width using length values (eg. 10px, 15px etc.). In the following example, length values have been used for the border-left-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-left-style:solid;
         border-left-width: 15px;
      }

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

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

</html>

Supported Browsers

Property
border-left-width	1.0	4.0	1.0	1.0	3.5

css_reference.htm

Print Page