CSS - border-bottom-style 屬性

CSS border-bottom-style 屬性設定元素底部邊框的樣式。

語法

border-bottom-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 值。
inherit	從父元素繼承此屬性。

CSS 底部邊框樣式屬性示例

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

無底部邊框樣式

要使底部邊框沒有任何邊框，我們使用 none 值。在以下示例中，使用了 none 值。

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: none;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: none;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style without bottom border
   </h3>
   <p>
      Border Bottom Style without bottom border
   </p>
</body>

</html>

隱藏底部邊框樣式

要設定隱藏的底部邊框，我們使用 hidden 值。這使得邊框佔用空間但保持不可見。以下示例顯示了此效果。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .box {
         width: 200px;
         padding: 10px;
         border: 5px solid;
      }

      .none {
         border-bottom-style: none;
         background-color: lightgray;
      }

      .transparent {
         border-bottom-style: solid;
         border-bottom-color: transparent;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style Property
   </h2>
   <p>
      Border Bottom Style with none value
   </p>
   <div class="box none">
      Border Bottom Style: none
   </div>
   <p>
      Border Bottom Style with transparent value
   </p>
   <div class="box transparent">
      Border Bottom Style: 
      transparent
   </div>
</body>

</html>

點狀底部邊框樣式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dotted;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dotted;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dotted border
   </h3>
   <p>
      Border Bottom Style with dotted border
   </p>
</body>

</html>

虛線底部邊框樣式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: dashed;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: dashed;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with dashed border
   </h3>
   <p>
      Border Bottom Style with dashed border
   </p>
</body>

</html>

實線底部邊框樣式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: solid;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: solid;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with solid border
   </h3>
   <p>
      Border Bottom Style with solid border
   </p>
</body>

</html>

雙線底部邊框樣式

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

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: double;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: double;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with double border
   </h3>
   <p>
      Border Bottom Style with double border
   </p>
</body>

</html>

凹槽底部邊框樣式

要使底部邊框為 3D 凹槽，我們使用 groove 值。此效果取決於 border-color。在以下示例中，使用 groove 值與 border-bottom-style 屬性一起使用，並使用紅色邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: groove;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: groove;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with groove border
   </h3>
   <p>
      Border Bottom Style with groove border
   </p>
</body>

</html>

凸脊底部邊框樣式

要使底部邊框為 3D 凸脊，我們使用 ridge 值。此效果取決於 border-color。在以下示例中，使用 ridge 值與 border-bottom-style 屬性一起使用，並使用黃色邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: ridge;
      }

      h3 {
         padding:10px;
         border: 5px dashed;
         border-bottom-style: ridge;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with ridge border
   </h3>
   <p>
      Border Bottom Style with ridge border
   </p>
</body>

</html>

內嵌底部邊框樣式

要使底部邊框為 3D 內嵌，我們使用 inset 值。此效果取決於 border-color。在以下示例中，使用 inset 值與 border-bottom-style 屬性一起使用，並使用橙色邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: inset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: inset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with inset border
   </h3>
   <p>
      Border Bottom Style with inset border
   </p>
</body>

</html>

外凸底部邊框樣式

要使底部邊框為 3D 外凸，我們使用 outset 值。此效果取決於 border-color。在以下示例中，使用 outset 值與 border-bottom-style 屬性一起使用，並使用綠色邊框顏色。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         padding:10px;
         border: 5px solid;
         border-bottom-style: outset;
      }

      h3 {
         padding:10px;
         border: 5px groove;
         border-bottom-style: outset;
      }
   </style>
</head>

<body>
   <h2>
      CSS border-bottom-style property
   </h2>
   <h3>
      Border Bottom Style with outset border
   </h3>
   <p>
      Border Bottom Style with outset border
   </p>
</body>

</html>

支援的瀏覽器

屬性
border-bottom-style	1.0	5.5	1.0	1.0	9.2

css_properties_reference.htm

列印頁面