CSS - border-top 屬性

CSS border-top 屬性是一個簡寫屬性，用於在一個宣告中設定邊框頂部屬性 border-top-width、border-top-style 和 border-top-color。必須宣告 border-top-style才能使用此屬性。如果未提供，則將使用其他屬性的預設值。

語法

border-top: border-width border-style border-color | initial | inherit;

屬性值

值	描述
border-top-width	指定元素頂部邊框的寬度。可選。預設值為 medium。
border-top-style	指定元素頂部邊框的樣式。必需。預設值為 none。
border-top-color	指定元素頂部邊框的顏色。可選。預設值為文字顏色。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS 頂部邊框屬性示例

以下示例說明了使用不同值的 border-top 屬性。

定義頂部邊框屬性的所有值

要在單個宣告中定義 border-top-width、border-top-style 和 border-top-color 的值，我們使用 border-top 屬性。需要提供三個值，第一個值用於寬度，第二個值用於樣式，第三個值用於顏色。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
    <style>
      .examples {
        text-align: center;
        padding: 20px;
      }

      .example1 {
        border-top: 7px solid green;
        background-color: lightblue;
      }

      .example2 {
        border: 2px solid black;
        border-top: 7px double red;
      }
    </style>
</head>

<body>
    <h2>
      CSS border-top property
    </h2>
    <h2 class="examples example1">
      This heading has a 'green' color, 'solid'
      style and '7px' width border top
    </h2>
    <p class="examples example2">
      This box has a 'red' color, 'dashed' style
      and '7px' width border top
    </p>
</body>

</html>

頂部邊框屬性的組成屬性

border-top 屬性是 border-top-width、border-top-style 和 border-top-color 屬性的組合。以下示例顯示瞭如何組合使用這些屬性來顯示 border-top 屬性效果。

示例

<!DOCTYPE html>
<html>

<head>
  <style>
    .examples {
      text-align: center;
      padding: 20px;
    }

    .example1 {
      border-top-width: 8px;
      border-top-style: dashed;
      border-top-color: red;
      background-color: lightgreen;
    }

    .example2 {
      border: 2px solid black;
      border-top-width: 8px;
      border-top-style: dotted;
      border-top-color: purple;
    }
  </style>
</head>

<body>
  <h2>
    CSS border-top property
  </h2>
  <h2 class="examples example1">
    This heading has a 'red' color, 'dashed'
    style and '8px' width border top
  </h2>
  <p class="examples example2">
    This box has a 'purple' color, 'dotted'
    style and '8px' width border top
  </p>
</body>

</html>

支援的瀏覽器

屬性
border-top	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面