CSS - border-left-width 屬性

CSS border-left-width 屬性決定元素左側邊框的寬度。在使用此屬性之前，必須宣告 border-left-style。

語法

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

屬性值

值	描述
medium	指定左側邊框中等寬度。預設值。
thin	指定左側邊框細寬度。
thick	指定左側邊框粗寬度。
長度	厚度可以以值的形態給出。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 左邊框寬度屬性示例

以下示例解釋了使用不同值的 border-left-width 屬性。

使用 medium 值的左邊界寬度屬性

要將中等寬度設定為左邊界，我們可以使用 medium 值。在以下示例中，border-left-width 屬性使用了 medium 值。

示例

    
<!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>

使用 thin 值的左邊界寬度屬性

要將小寬度設定為左邊界，我們可以使用 thin 值。在以下示例中，border-left-width 屬性使用了 thin 值。

示例

    
<!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>

使用 thick 值的左邊界寬度屬性

要將粗寬度設定為左邊界，我們可以使用 thick 值。在以下示例中，border-left-width 屬性使用了 thick 值。

示例

    
<!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>

使用長度值的左邊界寬度屬性

要設定左邊界寬度，我們可以使用長度值（例如 10px、15px 等）指定寬度。在以下示例中，border-left-width 屬性使用了長度值。

示例

    
<!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>

支援的瀏覽器

屬性
border-left-width	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面