border-width
============

**`border-width`** は一括指定の CSS のプロパティで、要素の境界の幅を設定します。

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

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

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

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


```css
/\* キーワード値 \*/
border-width: thin;
border-width: medium;
border-width: thick;

/\* <length> 値 \*/
border-width: 4px;
border-width: 1.2rem;

/\* 上下 | 左右 \*/
border-width: 2px 1.5em;

/\* 上 | 左右 | 下 \*/
border-width: 1px 2em 1.5cm;

/\* 上 | 右 | 下 | 左 \*/
border-width: 1px 2em 0 4rem;

/\* グローバルキーワード \*/
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: unset;
```


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

* 値が **1 つ**指定された場合、**全 4 辺**に同じ幅が適用される。
* 値が **2 つ**指定された場合、1 つ目の幅は**上下**、2 つ目は**左右**の辺に適用される。
* 値が **3 つ**指定された場合、1 つ目の幅は**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
* 値が **4 つ**指定された場合、幅はそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
### 値

`<line-width>`

境界の幅を、明示的な非負の `<length>` またはキーワードで定義します。キーワードの場合は、以下の値の何れかでなければなりません。

* `thin`
* `medium`
* `thick`


**メモ:** 仕様書ではそれぞれのキーワードで示される正確な太さを定義していないため、何れか 1つを使用した場合の詳細な結果は、実装に依存します。とは言っても、常に `thin ≤ medium ≤ thick` というパターンに従い、値は同じ文書の中では一貫しています。

公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `border-top-width`: `medium`
* `border-right-width`: `medium`
* `border-bottom-width`: `medium`
* `border-left-width`: `medium`
 |
| 適用対象 | すべての要素。 `::first-letter` にも適用されます。 |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして* `border-bottom-width`: 絶対的な長さ、または `border-bottom-style` が `none` または `hidden` の場合は `0`
* `border-left-width`: 絶対的な長さ、または `border-left-style` が `none` または `hidden` の場合は `0`
* `border-right-width`: 絶対的な長さ、または `border-right-style` が `none` または `hidden` の場合は `0`
* `border-top-width`: 絶対的な長さ、または `border-top-style` が `none` または `hidden` の場合は `0`
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `border-bottom-width`: length
* `border-left-width`: length
* `border-right-width`: length
* `border-top-width`: length
 |

形式文法
----
```

border-width =   
  <line-width>{1,4}    
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
```

例
-

### 値と長さの組み合わせ

#### HTML


```html
<p id="sval">one value: 6px wide border on all 4 sides</p>
<p id="bival">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="treval">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="fourval">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>
```


#### CSS


```css
#sval {
  border: ridge #ccc;
  border-width: 6px;
}
#bival {
  border: solid red;
  border-width: 2px 10px;
}
#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
```


#### Result

仕様書
---

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

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

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

関連情報
----

* 境界線に関する一括指定プロパティ: `border`, `border-style`, `border-color`
* 境界線の幅に関するプロパティ: `border-bottom-width`, `border-left-width`, `border-right-width`, `border-top-width`