border-style プロパティ
border-style プロパティは、border の実線やドット線といった線種（スタイル）を指定する CSS のプロパティです。
border はこの *-style プロパティを指定していないと表示されないことに注意が必要です。
border の上下左右の線種
を一括指定できます。上下左右で別々に線種
を指定したい場合は、複数の指定値を半角スペースで区切ります。
border-style: dotted;
border-color: green;
border-width: 5px;
詳しくは Example を参照してください
線種には実線( solid )や ドット線( dotted )などの他、立体的にみせる groove、 ridge、 inset、outset といったもののあります。詳しくは値（Values）
を参照してください。
border-style プロパティは、border-top-style、border-bottom-style、border-left-style、border-right-style によって上下左右の辺を別々にスタイルを指定することができます。
または、border-style プロパティの指定値を半角スペースで区切って上下左右それぞれのスタイルを指定することもできます。
border-style: solid dotted dashed double;
指定値を２つにすると上下、左右の指定にになります。
border-style: solid dotted;
指定値を３つにすると上、左右、下の指定にになります。
border-style: solid dotted dashed;
ページ内 Index
構文(Syntax)
CSS
border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit ;
DOM ( JavaScript )
object.style.borderStyle
object.style.borderStyle=" none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit "
値（Values）
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| hidden | 非表示 |
| dotted | ドット点線 |
| dashed | 点線 |
| solid | 実線 |
| double | 二重線 |
| groove | ３D丸みのある隆起した線 |
| ridge | ３D隆起した線 |
| inset | エレメント全体を凹んだ立体にみせる |
| outset | エレメント全体を立体にみせる |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
border-styleの例です。borderはエレメントの枠線が作成できますが、border-styleを設定しないと表示されません。
上下左右ごとのスタイル指定
border-style プロパティは、border-top-style、border-bottom-style、border-left-style、border-right-style によって上下左右の辺を別々にスタイルを指定することができます。
border-top-style
上辺のスタイルは border-top-style プロパティで指定します。
border-top-style: dotted;
border-top-style: dotted;
詳しくはborder-top-style
を参照してください。
border-bottom-style
下辺のスタイルは border-bottom-style プロパティで指定します。
border-bottom-style: dotted;
border-top-style: dotted;
詳しくはborder-bottom-style
を参照してください。
border-left-style
左辺のスタイルは border-left-style プロパティで指定します。
border-left-style: dotted;
border-left-style: dotted;
詳しくはborder-left-style
を参照してください。
border-right-style
右辺のスタイルは border-right-style プロパティで指定します。
border-right-style: dotted;
border-right-style: dotted;
詳しくはborder-right-style
を参照してください。
関連 CSS プロパティ
以下は border-style に関連するプロパティです。
| border | border-width、border-style、border-colorプロパティを一括指定 |
| border-color | 線の色 |
| border-image | border線を画像で |
| border-radius | 線の角を丸く |
| border-style | 線の種類 |
| border-width | 線の幅 |