border-style
border-styleは、枠線のスタイルを指定するCSSです。
解説
枠線のスタイルをキーワードで指定します。
border-styleには枠線の上下左右個別にスタイルを指定できます。
- 値を１つ指定した時：指定したスタイルが上下左右に適用されます。
- 値を２つ指定した時：１つ目が上下、２つ目が左右に適用されます。
- 値を３つ指定した時：１つ目が上、２つ目が左右、３つ目が下に適用されます。
- 値を４つ指定した時：１つ目が上、２つ目が右、３つ目が下、４つ目が左に適用されます。
構文
構文は以下になります。
border-style: 値1;
border-style: 値1 値2;
border-style: 値1 値2 値3;
border-style: 値1 値2 値3 値4;
値
border-styleには以下の値が指定できます。
| 値 | 説明 |
|---|---|
| solid | １本線 （例）border-style:solid; |
| double | ２本線 （例）border-style:double; |
| dotted | 点線 （例）border-style:dotted; |
| dashed | 破線 （例）border-style:dashed; |
| ridge | 膨らんだ線 （例）border-style:ridge; |
| groove | 窪んだ線 （例）border-style:groove; |
| inset | 要素全体が窪んだスタイル （例）border-style:inset; |
| outset | 要素全体が膨らんだスタイル （例）border-style:outset; |
| none | 線を指定しない （例）border-style:none; |
太字の値は初期値です。
見た目のサンプル
solid
double
dotted
dashed
ridge
groove
inset
outset
none
サンプル
上下左右全てにsolidを指定する
.sample01 {
border-style:solid;
}
<div class="sample01">solid</div>
solid
上下線にsolid 左右線にdoubleを指定する
.sample02 {
border-style:solid double;
}
<div class="sample02">solid double</div>
solid double
上線にsolid 左右線にdouble 下線にdottedを指定する
.sample03 {
border-style:solid double dotted;
}
<div class="sample03">solid double dotted</div>
solid double dotted
上線にsolid 右線にdouble 下線にdotted 左線にdashedを指定する
.sample04 {
border-style:solid double dotted dashed;
}
<div class="sample04">solid double dotted dashed</div>
solid double dotted dashed
備考
- none（枠線なし）がデフォルト値なので、枠線不要の場合はborder-styleを明示的に指定する必要はありません。
関連項目
- border：枠線に関するスタイルをまとめて指定する
- border-color：枠線の色を指定する
- border-radius：枠線の角の丸みを指定する
- border-style：枠線のスタイルを指定する
- border-width：枠線の太さを指定する
