初心者のスタイルシート(CSS)講座:枠線の種類を一括指定

・border−style
 枠線の種類を一括指定する

【枠線の種類を一括に指定する方法】
border-style:上下左右(キーワード)
border-style:上下、左右(キーワード1、キーワード2)
border-style:上、左右、下(キーワード1、キーワード2、キーワード3)
border-style:上、右、下、左(キーワード1、キーワード2、キーワード3、キーワード4)

【キーワード】
none・・・・・・初期設定。枠線を表示しない

hidden・・・・・枠線を表示しない

dotted・・・・・点線

dashed・・・・・破線

solid・・・・・実線

double・・・・・二重線

groove・・・・・へこんでいるように見える枠線

ridge・・・・・浮き上がったように見える枠線

inset・・・・・枠線より内側がへこんでいるように見える枠線

outset・・・・・枠線より内側が浮き上がっているように見える枠線

 ボックス領域の上下左右の枠線(ボーダー)の種類を一括指定します。値が1つの時は上下左右に同じ種類が適用されます。しかし、2〜4個の値を半角スペースで区切って並べた場合は値の数によって適用される枠線と種類の組み合わせが変化します。 border-styleプロパティを省略するとデフォルトのnoneが適用されて枠線は表示されません。 noneとhiddenはどちらも枠線を表示しませんが、テーブルなどのセルとして重なり合った場合には noneは他の値を優先するのに対し、hiddenは自分の値を優先します。