border-style プロパティ
border-style プロパティは、エレメントの border の線種(スタイル)
を定義できる CSS のプロパティです。
border の上下左右の線種
を一括指定できます。上下左右で別々に線種
を指定したい場合は、複数の指定値を半角スペースで区切ります。
border-style: dotted; border-color: green; border-width: 5px;
border-style プロパティは以下のように4辺を別々に指定することができます。
- border-top-style
- 上のボーターの線種
- border-bottom-style
- 下のボーターの線種
- border-left-style
- 左のボーターの線種
- border-right-style
- 右のボーターの線種
関連 CSS プロパティ
以下は border-style に関連するプロパティです。
border | border-width、border-style、border-colorプロパティを一括指定 |
border-color | 線の色 |
border-image | border線を画像で |
border-radius | 線の角を丸く |
border-style | 線の種類 |
border-width | 線の幅 |
構文(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 | 3D丸みのある隆起した線 |
ridge | 3D隆起した線 |
inset | エレメント全体を凹んだ立体にみせる |
outset | エレメント全体を立体にみせる |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | none |
継承(Inherited) | no |
変化(Animatable) | no |
Example
border-styleの例です。borderはエレメントの枠線が作成できますが、border-styleを設定しないと表示されません。