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

要素が浮き上がっているように見せる

どのように表示されるかは、実際に次の入力例の確認ページを見てもらった方が分かりやすいと思います。



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の値をスペースで区切って、複数指定すると、各辺のスタイルを個別に設定することができます。ただし、この方法は、直感的に分かりやすいとは思えないので、あまりお勧めしません。

値を指定する数による、個々の辺の設定

値の数

設定される辺

4辺全て

最初の値が上下、2番目の値が左右

最初の値が上、2番目の値が左右、3番目の値が下

最初の値が上、2番目の値が右、3番目の値が下、4番目の値が左



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プロパティを使用します。