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

border プロパティ

 border プロパティは、囲み線または枠線と呼ばれるエレメントの外周を縁取る線で、以下の太さ、スタイル、色を一括指定することができる CSS プロパティです。

borderの指定例
border: 5px dotted rgb(0, 102, 0);
詳しくは Example を参照してください

 border プロパティは、上(border-top)、下(border-bottom)、左(border-left)、右(border-right)を別々に指定することができます。

border プロパティについて

 border の幅を変更すると全体のサイズも影響を受けます。 以下は、サイズに関する注意点などの解説をしています。また、border のみを非表示にすることや border に似た outline プロパティについても解説します。

border と全体のサイズ

 border の幅によってエレメント全体のサイズが影響を受けます。 もしエレメントの領域内にpaddingやborderを収めたい場合は、box-sizingプロパティを使用します。

border の表示/非表示

 線種、border-styleプロパティの初期値がnoneのために、border-widthborder-colorを設定しても表示されません。borderを表示するためにはborder-styleプロパティの線種を設定する必要があります。

 borderを非表示にするには、border:none;です。

border、margin、padding

 border は、margin と padding の間に表示されます。

paddingbordermarginの表示領域について
padding,border,marginの表示領域について

 詳しくは padding,border,margin プロパティを参照してください。

outline プロパティ

 border プロパティに似たoutlineプロパティがあります。 outlineプロパティはborderのように上下左右の区別はありません。

構文(Syntax)

CSS

border: border-width border-style color;

DOM ( JavaScript )

値の取得
String = object.style.border;
値の設定
object.style.border = "border-width border-style color";

値(Values)

Value摘要
border-width線(border)の太さ、初期値はmedium
border-style線種で、初期値はnone。以下を参照
border-colorCSS Colorを参照
initial初期値に戻します。
inherit親要素(親エレメント)のプロパティを継承します。

 border プロパティは、border-widthborder-styleborder-color の値を組み合わせることができます。
  ただし、*-style を指定しないと border は表示されません。

border-block-style の値

 border-block-style で指定できる値には以下があります。

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

備考(Remarks)

Default valuemedium none color
Inherited(継承)no
Animatableno

Example