CSS - border-style 屬性

CSS 的 border-style 屬性設定元素四個邊框的樣式。該屬性最多可以接受四個值。根據提供的值的數量，邊框樣式將應用於相應的邊框。

語法

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

屬性值

值	描述
none	指定無邊框。預設值。
hidden	與 none 類似，但在表格元素的邊框衝突解決中有所不同。
dotted	指定點狀邊框。
dashed	指定虛線邊框。
solid	指定實線邊框。
double	指定雙線邊框。
groove	指定 3D 凹槽邊框。效果取決於 border-color 值。
ridge	指定 3D 脊狀邊框。效果取決於 border-color 值。
inset	指定 3D 內嵌邊框。效果取決於 border-color 值。
outset	指定 3D 外凸邊框。效果取決於 border-color 值。
initial	將屬性設定為預設值。
inherit	從父元素繼承該屬性。

CSS 邊框樣式屬性示例

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

無邊框樣式

要使四個邊框均不顯示任何邊框樣式，我們使用 none 值。在以下示例中，使用了 none 值。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-none {
         border-style: none;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-none">
         This heading has 'none' border style
      </h1>
      <p class="border-none">
         This border has 'none' border style
      </p>
   </div>
</body>

</html>

透明邊框樣式

要使邊框存在但不可見，我們可以使用 transparent 值。transparent 值建立不可見的邊框，而 none 值則建立無邊框。以下示例顯示了此差異。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         padding: 15px;
         margin: 8px;
         text-align: center;
      }

      .border1 {
         border: 8px solid silver;
         border-style: none;
      }

      .border2 {
         border: 8px solid silver;
         border-color: gold;
         border-style: transparent;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <p class="borders border1">
         This border is using none value, 
         so it does not have border
         indicated by the gap in all four directions.
      </p>
      <p class="borders border2">
         This border is using transparent value,
         so it has an invisible border. Since the border
         exist, the border color is applied to it 
         indicated by the gold color.
      </p>
   </div>
</body>

</html>

點狀邊框樣式

要使四個邊框均為點狀，我們使用 dotted 值。在以下示例中，dotted 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dotted {
         border-style: dotted;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-dotted">
         This heading has 'dotted' border style
      </h1>
      <p class="border-dotted">
         This border has 'dotted' border style
      </p>
   </div>
</body>

</html>

虛線邊框樣式

要使四個邊框均為虛線，我們使用 dashed 值。在以下示例中，dashed 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-dashed {
         border-style: dashed;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-dashed">
         This heading has 'dashed' border style
      </h1>
      <p class="border-dashed">
         This border has 'dashed' border style
      </p>
   </div>
</body>

</html>

實線邊框樣式

要使四個邊框均為實線，我們使用 solid 值。在以下示例中，solid 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-solid {
         border-style: solid;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-solid">
         This heading has 'solid' border style
      </h1>
      <p class="border-solid">
         This border has 'solid' border style
      </p>
   </div>
</body>

</html>

雙線邊框樣式

要使四個邊框均為雙線，我們使用 double 值。在以下示例中，double 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-double {
         border-style: double;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-double">
         This heading has 'double' border style
      </h1>
      <p class="border-double">
         This border has 'double' border style
      </p>
   </div>
</body>

</html>

凹槽邊框樣式

要使四個邊框均為凹槽，我們使用 groove 值。在以下示例中，groove 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-groove {
         border-style: groove;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-groove">
         This heading has 'groove' border style
      </h1>
      <p class="border-groove">
         This border has 'groove' border style
      </p>
   </div>
</body>

</html>

脊狀邊框樣式

要使四個邊框均為脊狀，我們使用 ridge 值。在以下示例中，ridge 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-ridge {
         border-style: ridge;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-ridge">
         This heading has 'ridge' border style
      </h1>
      <p class="border-ridge">
         This border has 'ridge' border style
      </p>
   </div>
</body>

</html>

內嵌邊框樣式

要使四個邊框均為內嵌，我們使用 inset 值。在以下示例中，inset 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-inset {
         border-style: inset;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-inset">
         This heading has 'inset' border style
      </h1>
      <p class="border-inset">
         This border has 'inset' border style
      </p>
   </div>
</body>

</html>

外凸邊框樣式

要使四個邊框均為外凸，我們使用 outset 值。在以下示例中，outset 值與 border-style 屬性一起使用。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .border-outset {
         border-style: outset;
         border-color:red;
         border-width:6px;
         text-align: center;
         padding: 15px;
         margin: 8px;
      }

      h1 {
         background-color: lightblue;
      }

      p {
         border: 6px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h1 class="border-outset">
         This heading has 'outset' border style
      </h1>
      <p class="border-outset">
         This border has 'outset' border style
      </p>
   </div>
</body>

</html>

使用不同樣式的邊框樣式屬性

要使邊框具有不同的樣式，我們可以向 border-style 屬性提供不同數量的樣式。以下示例顯示瞭如何透過取不同數量的值來實現此目的。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .borders {
         text-align: center;
         padding: 18px;
         margin: 8px;
         border-width: 5px;
         border-color: green;
         background-color: lightblue;
      }

      .border-one {
         border-style: solid;
      }

      .border-two {
         border-style: solid dashed;
      }

      .border-three {
         border-style: solid dashed dotted;
      }

      .border-four {
         border-style: solid dashed dotted double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-style property
   </h2>
   <div>
      <h3>Single Value:</h3>
      <h2 class="borders border-one">
         This has single border style: 'solid'
         which is applied to all borders.
      </h2>
      <h3>Two Values:</h3>
      <h2 class="borders border-two">
         This has two border styles: 'solid'
         and 'dashed', solid style is applied
         to top and bottom borders, dashed style
         is applied to left and right borders.
      </h2>
      <h3>Three Values:</h3>
      <h2 class="borders border-three">
         This has three border styles: 'solid',
         'dashed' and 'dotted', solid is applied
         to top border, dashed to right and left
         borders and dotted to bottom border.
      </h2>
      <h3>Four Values:</h3>
      <h2 class="borders border-four">
         This has four border styles: 'solid',
         'dashed','dotted' and 'double', solid
         is applied to top border, dashed to 
         right border, dotted to bottom border
         and double to left border.
      </h2>

   </div>
</body>

</html>

支援的瀏覽器

屬性
border-style	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

列印頁面