border-styleプロパティ
border-styleプロパティの概要
機能 |
ボーダー(枠線)のスタイルの定義 |
指定可能な値 |
none(hidden), solid, double, dotted, dashed, groove, ridge, inset, outset |
初期値 |
none |
継承 |
しない |
適用可能なボックス |
全て |
border-styleプロパティは、要素のボーダー(枠線)のスタイルを定義します。border-styleプロパティの値には、次のような値を指定することができます。
枠線のスタイル
値 |
表示形態 |
solid |
実線 |
double |
二重線 |
dotted |
点線 |
dashed |
破線 |
groove |
埋め込まれて見える線 |
ridge |
浮き上がって見える線 |
inset |
要素が埋め込まれているように見せる |
outset |
要素が浮き上がっているように見せる |
どのように表示されるかは、実際に次の入力例の確認ページを見てもらった方が分かりやすいと思います。
example.css
div.solid {
border-style: solid;
}
div.double {
border-style: double;
}
div.dotted {
border-style: dotted;
}
div.dashed {
border-style: dashed;
}
div.groove {
border-style: groove;
}
div.ridge {
border-style: ridge;
}
div.inset {
border-style: inset;
}
div.outset {
border-style: outset;
}
各辺を個別に設定
border-styleの値をスペースで区切って、複数指定すると、各辺のスタイルを個別に設定することができます。ただし、この方法は、直感的に分かりやすいとは思えないので、あまりお勧めしません。
値を指定する数による、個々の辺の設定
値の数 |
設定される辺 |
1 |
4辺全て |
2 |
最初の値が上下、2番目の値が左右 |
3 |
最初の値が上、2番目の値が左右、3番目の値が下 |
4 |
最初の値が上、2番目の値が右、3番目の値が下、4番目の値が左 |
example2.css
div.number1 {
border-style: solid;
}
div.number2 {
border-style: solid double;
}
div.number3 {
border-style: solid double dotted;
}
div.number4 {
border-style: solid double dotted dashed;
}
このborder-styleプロパティはあまり使用されません
borderプロパティを使用すれば、枠線に関する指定も可能です。というよりも、borderプロパティと役割は結果的に同じです。通常はborder-styleプロパティを使用せずに、borderプロパティを使用します。