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

border-style プロパティ

　border-style プロパティは、border の実線やドット線といった線種（スタイル）を指定する CSS のプロパティです。
　border はこの *-style プロパティを指定していないと表示されないことに注意が必要です。

　border の上下左右の線種を一括指定できます。上下左右で別々に線種を指定したい場合は、複数の指定値を半角スペースで区切ります。

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

　線種には実線( solid )や ドット線( dotted )などの他、立体的にみせる groove、 ridge、 inset、outset といったもののあります。詳しくは値（Values）を参照してください。

　border-style プロパティは、border-top-style、border-bottom-style、border-left-style、border-right-style によって上下左右の辺を別々にスタイルを指定することができます。

　または、border-style プロパティの指定値を半角スペースで区切って上下左右それぞれのスタイルを指定することもできます。

border-style を４辺を別々で指定
border-style: solid dotted dashed double;

　指定値を２つにすると上下、左右の指定にになります。

border-style を上下、左右で指定
border-style: solid dotted;

　指定値を３つにすると上、左右、下の指定にになります。

border-style を上、左右、下で指定
border-style: solid dotted dashed;

ページ内 Index

- ad -

構文(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二重線
groove３D丸みのある隆起した線
ridge３D隆起した線
insetエレメント全体を凹んだ立体にみせる
outsetエレメント全体を立体にみせる
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）none
継承（Inherited）no
変化（Animatable）no

Example

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

- ad -

上下左右ごとのスタイル指定

　border-style プロパティは、border-top-style、border-bottom-style、border-left-style、border-right-style によって上下左右の辺を別々にスタイルを指定することができます。

border-top-style

　上辺のスタイルは border-top-style プロパティで指定します。

border-top-style
border-top-style: dotted;
表示例

border-top-style: dotted;

　詳しくはborder-top-styleを参照してください。

border-bottom-style

　下辺のスタイルは border-bottom-style プロパティで指定します。

border-bottom-style
border-bottom-style: dotted;
表示例

border-top-style: dotted;

　詳しくはborder-bottom-styleを参照してください。

border-left-style

　左辺のスタイルは border-left-style プロパティで指定します。

border-left-style
border-left-style: dotted;
表示例

border-left-style: dotted;

　詳しくはborder-left-styleを参照してください。

border-right-style

　右辺のスタイルは border-right-style プロパティで指定します。

border-right-style
border-right-style: dotted;
表示例

border-right-style: dotted;

　詳しくはborder-right-styleを参照してください。

- ad -

関連 CSS プロパティ

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

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

関連（Related）