border-style
要素の周囲に表示される境界線のスタイルを指定した値に設定します。
また、border-styleは4方向の境界線にそれぞれ別のスタイルを設定することができます。
値を3つ設定した場合はそれぞれ「上」「左右」「下」に設定されます。
値を2つ設定した場合はそれぞれ「上下」「左右」に設定されます。
値が1つの場合は全方向同じスタイルになります。
border-style: dotted;
これは要素の周囲に表示される境界線のスタイルを点線に設定する記述です。また、border-styleは4方向の境界線にそれぞれ別のスタイルを設定することができます。
border-style: solid dotted dashed double;
border-style: solid dotted dashed;
border-style: solid dotted;
border-style: solid;
値を4つ設定した場合はそれぞれ「上」「右」「下」「左」に設定されます。border-style: solid dotted dashed;
border-style: solid dotted;
border-style: solid;
値を3つ設定した場合はそれぞれ「上」「左右」「下」に設定されます。
値を2つ設定した場合はそれぞれ「上下」「左右」に設定されます。
値が1つの場合は全方向同じスタイルになります。
パラメータの設定
境界線のスタイル
利用できるスタイルは下記の通りです。
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
| none | 境界線を表示しません。境界線の幅も0になります。 |
| hidden | noneと同じく境界線を表示しません。ただしnoneと違ってtableタグで他の境界線と重なった場合でも非表示となります。 |
| dotted | 境界線を点線で描写します。 |
| dashed | 境界線を破線で描写します。 |
| solid | 境界線を実線で描写します。 |
| double | 境界線を二重線で描写します。 |
| groove | 境界線をへこんだ立体線で描写します。 |
| ridge | 境界線を出っ張った立体線で描写します。 |
| inset | 要素全体がへこんだようなデザインになる境界線を描写します。 |
| outset | 要素全体が出っ張ったようなデザインになる境界線を描写します。 |
利用例
境界線のスタイルを設定
border-style: dotted;
border-color: red;
border-width: 6px;
border-color: red;
border-width: 6px;
■ 表示される内容
none
dotted
dashed
solid
double
groove
ridge
inset
outset
設定したスタイルで境界線がどう表示されるかの一覧です。
各要素に記載された値を設定しています。
各要素に記載された値を設定しています。
スタイルを1つ指定した場合
border-style: solid;
border-color: #000000;
border-width: 5px;
border-color: #000000;
border-width: 5px;
■ 表示される内容
1つだけ指定した場合は全方向すべて同じ幅になります。
スタイルを2つ指定した場合
border-style: solid dotted;
border-color: #000000;
border-width: 5px;
border-color: #000000;
border-width: 5px;
■ 表示される内容
2つ指定した場合はそれぞれ「上下」「左右」のスタイルになります。
スタイルを3つ指定した場合
border-style: solid dotted dashed;
border-color: #000000;
border-width: 5px;
border-color: #000000;
border-width: 5px;
■ 表示される内容
3つ指定した場合はそれぞれ「上」「左右」「下」のスタイルになります。
スタイルを4つ指定した場合
border-style: solid dotted dashed double;
border-color: #000000;
border-width: 5px;
border-color: #000000;
border-width: 5px;
■ 表示される内容
4つ指定した場合はそれぞれ「上」「右」「下」「左」のスタイルになります。