border
======

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

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

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

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

* `border-color`
* `border-style`
* `border-width`
構文
--


```css
/\* 種類 \*/
border: solid;

/\* 幅 | 種類 \*/
border: 2px dotted;

/\* 種類 | 色 \*/
border: outset #f33;

/\* 幅 | 種類 | 色 \*/
border: medium dashed green;

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


`border` プロパティは、以下に挙げる値の 1 ～ 3 つを使用して指定します。値の順序は関係ありません。

**メモ:** style が指定されていない場合は境界線は表示されません。 style の既定値が `none` だからです。

### 値

`<line-width>`

境界線の太さを設定します。指定されなかった場合は既定値の `medium` になります。 `border-width` を参照してください。

`<line-style>`

境界線の種類を設定します。指定されなかった場合は既定値の `none` になります。 `border-style` を参照してください。

`<color>`

境界線の色を設定します。指定されなかった場合は既定値で要素の `color` プロパティになります。 `border-color` を参照してください。

解説
--

他の一括指定プロパティと同様、省略された部分値は初期値に設定されます。重要なことですが、 `border` は `border-image` のカスタム値を指定することができず、初期値、つまり `none` に設定します。

`border` による一括指定は、四辺をすべて同じに設定したい場合に特に便利です。しかし、それぞれが異なる場合は、それぞれの辺に異なる値を設定できる個別指定の `border-width`、 `border-style`、 `border-color` プロパティを使用してください。他に、一度に一つの境界線を対象とした、物理的 (`border-top` など) や論理的 (`border-block-start` など) な境界線プロパティを使用することもできます。

### 境界線と輪郭線

境界線と輪郭線はよく似ています。しかし、輪郭線は以下の点で境界線とは異なります。

* 輪郭線は領域を占有せず、要素のコンテンツの外側に描画されます。
* 輪郭線は普通は矩形ですが、仕様によれば、矩形である必要はありません。
公式定義
----

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

形式文法
----
```

border =   
  <line-width>  ||  
  <line-style>  ||  
  <color>         
  
<line-width> =   
  <length [0,∞]>  |  
  thin            |  
  medium          |  
  thick             
  
<line-style> =   
  none    |  
  hidden  |  
  dotted  |  
  dashed  |  
  solid   |  
  double  |  
  groove  |  
  ridge   |  
  inset   |  
  outset    
  
```

例
-

### ピンク色の出っ張った境界の設定

#### HTML


```html
<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
```


#### CSS


```css
div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}
```


#### 結果

仕様書
---

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

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

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

関連情報
----

* `border-width`
* `border-style`
* `border-color`
* 背景と境界
* CSS の学習: 背景と境界