border-style
============

**`border-style`** は 一括指定 の CSS プロパティで、要素の境界線の 4 辺すべての線のスタイルを設定します。

試してみましょう
--------

構成要素のプロパティ
----------

このプロパティは以下の CSS プロパティの一括指定です。

* `border-bottom-style`
* `border-left-style`
* `border-right-style`
* `border-top-style`
構文
--


```css
/\* キーワード値 \*/
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;

/\* 上下 | 左右 \*/
border-style: dotted solid;

/\* 上 | 左右 | 下 \*/
border-style: hidden double dashed;

/\* 上 | 右 | 下 | 左 \*/
border-style: none solid dotted dashed;

/\* グローバル値 \*/
border-style: inherit;
border-style: initial;
border-style: revert;
border-style: unset;
```


`border-style` プロパティは 1 つ、 2 つ、 3 つ、 4 つの値を使って指定することができます。

* 値が **1 つ**指定された場合、**全 4 辺**に同じスタイルが適用される。
* 値が **2 つ**指定された場合、1 つ目のスタイルは**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目のスタイルは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、スタイルはそれぞれ**上**、**右**、**下**、**左**の順（時計回り）に適用される。

それぞれの値は以下の一覧にあるキーワードです。

### 値

`<line-style>`

境界のスタイルを記述します。以下の値を使用することができます。

`none`

`hidden` キーワードと同様に、境界線を表示しません。 `background-image` を設定している場合を除き、プロパティで別に指定していても `border-width` の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `none` 値はもっとも低い優先度になります。ほかに競合する境界線が設定されている場合も、そちらが表示されます。

`hidden`

`none` キーワードと同様に、境界線を表示しません。 `background-image` を設定している場合を除き、プロパティで別に指定していても `border-width` の同じ辺の計算値は `0` になります。テーブルのセルで境界線が collasped 形式である場合は、 `hidden` 値はもっとも高い優先度になります。ほかに競合する境界線が設定されている場合も、非表示になります。

`dotted`

連続した丸い点を表示します。点の間の空白の量は仕様書で定義されておらず、実装依存です。点の半径は、同じ辺の `border-width` の計算値の半分です。

`dashed`

短く角が四角い連続したダッシュや線分を表示します。線分の実寸や長さは仕様書で定義されておらず、実装依存です。

`solid`

1 本の直線、実線を表示します。

`double`

2 本の直線を表示し、幅の合計は `border-width` で定義したピクセル数になります。

`groove`

凹んだように見える境界線を表示します。 `ridge` の逆です。

`ridge`

出っ張ったように見える境界線を表示します。 `groove` の逆です。

`inset`

要素が埋め込まれて見える境界線を表示します。 `outset` の逆です。 `border-collapse` が `collapsed` に設定されたテーブルのセルに適用すると、この値は `groove` のようにふるまいます。

`outset`

要素が出っ張って見える境界線を表示します。 `inset` の逆です。 `border-collapse` を `collapsed` に設定したテーブルセルに適用すると、この値は `ridge` のようにふるまいます。


公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-style`: `none`
* `border-right-style`: `none`
* `border-bottom-style`: `none`
* `border-left-style`: `none`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-style`: 指定通り
* `border-left-style`: 指定通り
* `border-right-style`: 指定通り
* `border-top-style`: 指定通り
 |
| アニメーションの種類 | 離散値 |

形式文法
----
```

border-style =   
  <line-style>{1,4}    
  
<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 の例示用クラス \*/
.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;
}
```

### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # border-style |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 境界に関する CSS 一括指定プロパティ: `border`, `border-width`, `border-color`, `border-radius`