備忘録的プログラミングリファレンス

border-style プロパティ

 border-style プロパティは、エレメントの border線種(スタイル)を定義できる CSS のプロパティです。
 border の上下左右の線種を一括指定できます。上下左右で別々に線種を指定したい場合は、複数の指定値を半角スペースで区切ります。

borderを点線、緑色、5pxの幅で表示
border-style: dotted;
border-color: green;
border-width: 5px;
詳しくは Example を参照してください

 border-style プロパティは以下のように4辺を別々に指定することができます。

border-top-style
上のボーターの線種
border-bottom-style
下のボーターの線種
border-left-style
左のボーターの線種
border-right-style
右のボーターの線種

関連 CSS プロパティ

 以下は border-style に関連するプロパティです。

borderborder-width、border-style、border-colorプロパティを一括指定
border-color線の色
border-imageborder線を画像で
border-radius線の角を丸く
border-style線の種類
border-width線の幅

構文(Syntax)

CSS

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit ;

DOM ( JavaScript )

値の取得
object.style.borderStyle
値の設定
object.style.borderStyle=" none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit "

値(Values)

Value摘要
none初期値(default値)
hidden非表示
dottedドット点線
dashed点線
solid実線
double二重線
groove3D丸みのある隆起した線
ridge3D隆起した線
insetエレメント全体を凹んだ立体にみせる
outsetエレメント全体を立体にみせる
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)no
変化(Animatable)no

Example

 border-styleの例です。borderはエレメントの枠線が作成できますが、border-styleを設定しないと表示されません。