border プロパティ
border プロパティは、囲み線または枠線と呼ばれるエレメントの外周を縁取る線で、以下の太さ、スタイル、色を一括指定することができる CSS プロパティです。
border: 5px dotted rgb(0, 102, 0);
border プロパティは、上（border-top）、下（border-bottom）、左（border-left）、右（border-right）を別々に指定することができます。
- ad -
border プロパティについて
border の幅を変更すると全体のサイズも影響を受けます。 以下は、サイズに関する注意点などの解説をしています。また、border のみを非表示にすることや border に似た outline プロパティについても解説します。
border と全体のサイズ
border の幅によってエレメント全体のサイズが影響を受けます。 もしエレメントの領域内にpaddingやborderを収めたい場合は、box-sizingプロパティを使用します。
border の表示／非表示
線種、border-styleプロパティの初期値がnoneのために、border-widthやborder-colorを設定しても表示されません。borderを表示するためにはborder-styleプロパティの線種を設定する必要があります。
borderを非表示にするには、border:none;です。
border、margin、padding
border は、margin と padding の間に表示されます。
詳しくは padding,border,margin プロパティ
を参照してください。
outline プロパティ
border プロパティに似たoutlineプロパティがあります。 outlineプロパティはborderのように上下左右の区別はありません。
構文(Syntax)
CSS
border: border-width border-style color;
DOM ( JavaScript )
String = object.style.border;
object.style.border = "border-width border-style color";
値（Values）
| Value | 摘要 |
|---|---|
| border-width | 線(border)の太さ、初期値はmedium |
| border-style | 線種で、初期値はnone。以下を参照 |
| border-color | CSS Colorを参照 |
| initial | 初期値に戻します。 |
| inherit | 親要素（親エレメント）のプロパティを継承します。 |
border プロパティは、border-width、border-style、border-color の値を組み合わせることができます。
ただし、*-style を指定しないと border は表示されません。
border-block-style の値
border-block-style で指定できる値には以下があります。
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| hidden | 非表示 |
| dotted | ドット点線 |
| dashed | 点線 |
| solid | 実線 |
| double | 二重線 |
| groove | ３D丸みのある隆起した線 |
| ridge | ３D隆起した線 |
| inset | エレメント全体を凹んだ立体にみせる |
| outset | エレメント全体を立体にみせる |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| Default value | medium none color |
| Inherited（継承） | no |
| Animatable | no |