1. Web
  2. CSS
  3. border-style

border-style

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

border-style 簡寫 CSS 屬性用於設定元素所有四條邊框的樣式。

試一試

border-style: none;

border-style: dotted;

border-style: inset;

border-style: dashed solid;

border-style: dashed double none;

border-style: dashed groove none dotted;

<section id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: #eeeeee;
  color: black;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

body {
  background-color: white;
}

構成屬性

此屬性是以下 CSS 屬性的簡寫：

語法

css
/* Keyword values */
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

/* top and bottom | left and right */
border-style: dotted solid;

/* top | left and right | bottom */
border-style: hidden double dashed;

/* top | right | bottom | left */
border-style: none solid dotted dashed;

/* Global values */
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: revert-layer;
border-style: unset;

border-style 屬性可以使用一個、兩個、三個或四個值來指定。

  • 當指定一個值時，它會將相同的樣式應用於所有四條邊。
  • 當指定兩個值時，第一個樣式應用於頂部和底部，第二個樣式應用於左側和右側。
  • 當指定三個值時，第一個樣式應用於頂部，第二個樣式應用於左側和右側，第三個樣式應用於底部。
  • 當指定四個值時，樣式按頂部、右側、底部和左側的順序（順時針）應用。

每個值都是從以下列表中選擇的關鍵字。

值

<line-style>

描述邊框的樣式。它可以有以下值：

none

與 hidden 關鍵字類似，不顯示邊框。除非設定了 background-image，否則即使指定了其他值，同側的 border-width 的計算值也將為 0。在表格單元格和邊框摺疊的情況下，none 值的優先順序最低：如果設定了任何其他衝突的邊框，它將被顯示。

hidden

與 none 關鍵字類似，不顯示邊框。除非設定了 background-image，否則即使指定了其他值，同側的 border-width 的計算值也將為 0。在表格單元格和邊框摺疊的情況下，hidden 值的優先順序最高：如果設定了任何其他衝突的邊框，它將不會被顯示。

dotted

顯示一系列圓點。點的間距未由規範定義，且取決於具體實現。點的半徑是同側 border-width 計算值的一半。

dashed

顯示一系列短的方形末端虛線或線段。線段的精確大小和長度未由規範定義，且取決於具體實現。

solid

顯示一條單一、筆直、實心的線。

double

顯示兩條直線，它們的總畫素大小由 border-width 定義。

groove

顯示具有雕刻外觀的邊框。它與 ridge 相反。

ridge

顯示具有凸出外觀的邊框。它與 groove 相反。

inset

顯示使元素看起來嵌入的邊框。它與 outset 相反。當應用於 border-collapse 設定為 collapsed 的表格單元格時，此值的行為類似於 ridge。

outset

顯示使元素看起來浮雕的邊框。它與 inset 相反。當應用於 border-collapse 設定為 collapsed 的表格單元格時，此值的行為類似於 groove。

正式定義

初始值作為簡寫中的每個屬性
應用於所有元素。也適用於 ::first-letter。
繼承性否
計算值作為簡寫中的每個屬性
動畫型別離散

正式語法

border-style = 
  <'border-top-style'>{1,4}  

<border-top-style> = 
  <line-style>  

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

示例

所有屬性值

這是所有屬性值的示例。

HTML

html
<pre class="b1">none</pre>
<pre class="b2">hidden</pre>
<pre class="b3">dotted</pre>
<pre class="b4">dashed</pre>
<pre class="b5">solid</pre>
<pre class="b6">double</pre>
<pre class="b7">groove</pre>
<pre class="b8">ridge</pre>
<pre class="b9">inset</pre>
<pre class="b10">outset</pre>

CSS

css
pre {
  height: 80px;
  width: 120px;
  margin: 20px;
  padding: 20px;
  display: inline-block;
  background-color: palegreen;
  border-width: 5px;
  box-sizing: border-box;
}

/* border-style example classes */
.b1 {
  border-style: none;
}

.b2 {
  border-style: hidden;
}

.b3 {
  border-style: dotted;
}

.b4 {
  border-style: dashed;
}

.b5 {
  border-style: solid;
}

.b6 {
  border-style: double;
}

.b7 {
  border-style: groove;
}

.b8 {
  border-style: ridge;
}

.b9 {
  border-style: inset;
}

.b10 {
  border-style: outset;
}

結果

規範

規範
CSS Backgrounds and Borders Module Level 3
# border-style

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 於 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.