CSS - border-width 屬性

CSS 的 **border-width** 是一個簡寫屬性，用於設定元素四個邊框的寬度。該屬性最多接受四個值，因此根據傳遞的值的數量，相應的邊框寬度將受到影響。必須宣告 border-style 屬性才能使用此屬性。

語法

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

屬性值

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

CSS 邊框寬度屬性示例

以下示例說明了帶有值的 **border-width** 屬性。

帶有中等值的邊框寬度屬性

要將中等寬度設定為邊框，我們可以使用 **medium** 值。在以下示例中，**border-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-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>

帶有細值的邊框寬度屬性

要將小寬度設定為邊框，我們可以使用 **thin** 值。在以下示例中，**border-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-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>

帶有粗值的邊框寬度屬性

要將粗寬度設定為邊框，我們可以使用 **thick** 值。在以下示例中，**border-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-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>

帶有長度值的邊框寬度屬性

要設定邊框的寬度，我們可以使用長度值（例如 10px、15px 等）指定寬度。在以下示例中，**border-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-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**，我們可以為該屬性指定不同數量的值。以下示例顯示了這一點。

示例

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

支援的瀏覽器

屬性
border-width	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面