Title

borderとは

ここで説明するborder とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 領域、縁、端、境界

目次に戻る

borderプロパティの概要

このプロパティは、HTML要素の上下左右の境界線のデザインを設定するために使用します。

境界線にのデザインに関する情報として、太さ、線の種類、色の3つの値を設定することで、 要素の四辺のボーダーラインを好みのデザインに変更することができます。

このプロパティは親プロパティであり、境界線の四辺のデザインを一括で設定するために使われますが、 各辺や、その辺の太さ、種類、色の詳細な設定を個別に指定できるように、個別プロパティが配下に存在します。

個別プロパティについてはページの後半で紹介させていただくことにして、 まずは、総合の一括プロパティから検証していこうと思います。

目次に戻る

実機サンプルとサンプルコード

このborderプロパティは要素の境界線を設定するための総合プロパティです。 ここでは総合プロパティで指定する3つの設定値を見ていきましょう。

構文

セレクター{border: 太さの値 種類の値 色の値;}

初期値: medium none currentColor

先ほども述べましたが、このプロパティには3つの設定値を設定します。 値を省略することもできますが、設定されない場合は、その設定値は初期値としてあつかわれます。 ここでは総合プロパティの初期値として3つの設定値を見ていきましょう。

境界線を設定するためには「線の太さ」、「線の種類」、「線の色」を設定する必要があります。 初期値のmediumは線の太さを表しています。それと同じようにnoneは線の種類であり、currentColorは線の色のことです。 この3つの設定値で境界線は表示されていることをご理解ください。

それでは下のサンプルを見て下さい。これは境界線の初期値のサンプルですが、境界線は表示されていません。 ここで表示されていない理由は「線の種類」の値がnoneになっているからです。none の意味は「なし」です。 つまり「線の種類=なし」と設定しているので境界線は表示されないというわけです。

div{border: medium none currentColor;}

目次に戻る

キーワード値で線の種類を指定する

ここからは、キワード値で線の種類を指定する方法を検証していきます。

noneキーワード

none とは、「無い」という意味で境界線は表示されません。 これは、境界線の種類の初期値であり、指定しない場合はこの値になります。

div{border: none;}

目次に戻る

hiddenキーワード

hidden とは、「隠された」という意味で境界線は表示されません。 表のセルなどのボーダーがかさなり合う場合はこの値が優先されます。

div{border: hidden;}

目次に戻る

solidキーワード

solid とは、「個体」という意味で1本線で表示されます。

div{border: solid;}

目次に戻る

doubleキーワード

double とは、「二重、二層」という意味で2本線で表示されます。

div{border: double;}

目次に戻る

grooveキーワード

groove とは、「溝、くぼみ」という意味で立体的に窪んだ線で表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{border: groove;}

目次に戻る

ridgeキーワード

ridge とは、「隆起(線)、尾根」などの意味で立体的に隆起した線で表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{border: ridge;}

目次に戻る

insetキーワード

inset とは、「挿入、はめ込み」などの意味で上と左のボーダーが暗く、下と右のボーダーが明るく表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{border: inset;}

目次に戻る

outsetキーワード

outset とは、「初め、発端」などの意味で上と左のボーダーが明るく、下と右のボーダーが暗く表示されます。 サンプルは，見やすくする為に太線で表示しています。

div{border: outset;}

目次に戻る

dashedtキーワード

dashed とは、「破線」の意味で破線で表示されます。

div{border: dashed;}

目次に戻る

dottedキーワード

dotted とは、「点付き、点線入り」の意味で点線で表示されます。

div{border: dotted;}

目次に戻る

キーワード値で境界線の太さを指定する

ここからは、キーワード値で境界線の太さを指定する方法を検証していきます。

mediumキーワード

medium とは、「中」という意味でブラウザの既定値で表示されます。 これは、境界線の太さの初期値であり、指定しない場合はこの値になります。

div{border: medium solid;}

目次に戻る

thickキーワード

thick とは、厚いという意味で太線で表示されます。

div{border: thick solid;}

目次に戻る

thinキーワード

thin とは、薄いという意味で細線で表示されます。

div{border: thin solid;}

目次に戻る

数値で太さを指定をする

数値による太さの指定は数値と単位をセットで記述します。 このサンプルでは単位をpxで指定しています。

div{border: 10px solid;}

目次に戻る

境界線の色を指定をする

境界線の色を指定するには、 カラーコードかカラーネームで指定します。

div{border:  red solid;}
div{border:  #00f solid;}	

目次に戻る

グローバル値

borderプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値のmedium none currentColorに戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

div{border: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

一括プロパティのまとめ: 境界線の太さ、種類、色を一括指定する

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border: medium none currentColor;

border: hidden;

border: solid;

border: double;

border: 10px groove;

border: 10px ridge;

border: 10px inset;

border: 10px outset;

border: dashed;

border: dotted;

border: medium solid;

border: thick solid;

border: thin solid;

border: red solid;

border: #00f solid;

これまでの検証の通り、borderプロパティで四辺の境界線を一括設定で全て同じデザインにするには、 境界線の太さ、種類、色を一度に指定します。

境界線の太さ、色、種類の指定の順番は入れ替わっても問題ありません。

div{border: red 20px ridge;}	

目次に戻る

個別プロパティ

これまで使用したborderプロパティは、境界線の一括指定のプロパティです。 ここからは、個別のプロパティを使った指定方法で検証します。

境界線の四辺を個別にデザインする

ここからは境界線の四辺を別々に設定するためのプロパティを紹介していきます。 別々と言っても、太さ、種類、色を指定する点はborderプロパティと変わりません。 下記のプロパティが、それにあたります。各プロパティはそれぞれ、topは上辺、bottomは下辺、leftは左辺、rightは右辺の 個別プロパティです。

• border-top
• border-bottom
• border-left
• border-right

これは境界線のデザインを個別に指定することができるので、このサイトでも使用しているような見出し文字の装飾にも利用できます。

div{
	border-top: thin dashed blue;
	border-bottom: solid blue;
	border-right: none;
	border-left: 10px solid blue;
}	

目次に戻る

border-widthで境界線の太さのみをデザインする

border-widthプロパティは、境界線の太さだけを指定するためのプロパティです。 また、そのborder-widthプロパティに四辺別々の設定をする個別プロパティがあり、全部で5種類のプロパティとなります。

• border-width
• border-top-width
• border-bottom-width
• border-right-width
• border-left-width

境界線の太さ: 四辺を一括設定

div{
	border-style: solid;
	border-width: thick;
}	

境界線の太さ: 個別辺を設定

div{
	border-style: solid;
	border-top-width: thin;
	border-bottom-width: medium;
	border-left-width: thick;
	border-right-width: 0;
}	

目次に戻る

border-styleで境界線の種類のみをデザインする

border-styleプロパティは、境界線の種類だけを指定するためのプロパティです。 また、そのborder-styleプロパティに四辺別々の設定をする個別プロパティがあり、全部で5種類のプロパティとなります。

• border-style
• border-top-style
• border-bottom-style
• border-right-style
• border-left-style

境界線の種類: 四辺を一括設定

div{border-style: dotted;}	

境界線の種類: 個別辺を設定

div{
	border-top-style: dashed;
	border-bottom-style: dotted;
	border-left-style: solid;
	border-right-style: none;
}	

目次に戻る

border-colorで境界線の色のみをデザインする

border-colorプロパティは、境界線の色だけを指定するためのプロパティです。 また、そのborder-colorプロパティに四辺別々の設定をする個別プロパティがあり、全部で5種類のプロパティとなります。

• border-color
• border-top-color
• border-bottom-color
• border-right-color
• border-left-color

境界線の色: 四辺を一括設定

div{
	border-style: solid;
	border-color: red;
}	

境界線の色: 個別辺を設定

div{
	border-style: solid;
	border-top-color: blue;
	border-bottom-color: #FF0;
	border-left-color: rgb(0,255,0);
	border-right-color: rgba(0,0,0,0.5);
}	

目次に戻る