borderプロパティ：プロパティの意味と使い方
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- ボーダーに関するスタイルを一変に設定します。
- borderプロパティで指定する値には下記のボーダー関連のプロパティに指定する値をスペースで区切って指定します。
順序は任意で、省略した場合は規定値
になります。
※ボーダーの形状（border-styleプロパティで指定する値）を省略すると
『none』が初期値なのでボーダーが表示されないので注意が必要です。 - 値の継承はしません
- borderプロパティで設定した形状・色・太さはボックスのボーダーの上下左右に適用されます。
- 値の継承はしません
- 『-top』（上）,『-bottom』（下）,『-right』（右）,『-left』（左）といった修飾子を負荷したプロパティによって、各方向を個別に指定することもできます。
- 上
- border-top
- 下
- border-bottom
- 右
- border-right
- 左
- border-left
関連記事
- CSSのカラーコードの指定でハッシュ（#）につづく６桁にしないとアメブロでは編集時にエラーになる
（メインブログでの記事です。）
はじめての方はこちらからどうぞ
border-colorプロパティ：プロパティの意味と使い方
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- ボーダー色を設定します。
- border-colorプロパティで設定した色はボックスのボーダーの上下左右に適用されます。
- border-colorプロパティに指定する値は、
各方向に対する値をスペースで区切って複数指定もできます。- 値を２つ指定
- 『上下』『左右』
- 値を３つ指定
- 『上』『左右』『下』
- 値を４つ指定
- 『上』『右』『下』『左』
（時計回りの順）
- border-colorプロパティに指定する値にはHTMLと同じように『red』（赤），『green』（緑），『blue』（青）といった色名のキーワード指定や
『#ff0000』（赤），『#00ff00』（緑），『#0000ff』（青）
といった6桁のカラーコードを指定できます。
更にCSSではカラーコードを3桁で
『#f00』（赤），『#0f0』（緑），『#00f』（青）といったものが指定できます
。
また、あまり使わないかとは思いますが、rgb関数で、
『rgb(255,0,0)』（赤），『rgb(0,255,0)』（緑），『rgb(0,0,255)』（青）のように
RGB値を10進の数値での指定と
『rgb(100%,0%,0%)』（赤），『rgb(0%,100%,0%)』（緑），『rgb(0%,0%,100%)』（青）のように
%で割合を指定することも出来ます。 - 初期値は、colorプロパティの値になります。
- また、キーワードで『transparent』を指定すると透明のボーダーになります。
- 値の継承はしません
- 『-top』（上）,『-bottom』（下）,『-right』（右）,『-left』（左）といった修飾子を負荷したプロパティによって、各方向を個別に指定することもできます。
- 上
- border-top-color
- 下
- border-bottom-color
- 右
- border-right-color
- 左
- border-left-color
関連記事
- CSSのカラーコードの指定でハッシュ（#）につづく６桁にしないとアメブロでは編集時にエラーになる
（メインブログでの記事です。）
はじめての方はこちらからどうぞ
border-widthプロパティ：プロパティの意味と使い方
- CSSの簡単な説明（CSSの基本を最初にお読みいただく方が良いかと思います。）
- ボーダーの太さを設定します。
- border-widthプロパティで設定した太さはボックスのボーダーの上下左右に適用されます。
- border-widthプロパティに指定する値は、
各方向に対する値をスペースで区切って複数指定もできます。- 値を２つ指定
- 『上下』『左右』
- 値を３つ指定
- 『上』『左右』『下』
- 値を４つ指定
- 『上』『右』『下』『左』
（時計回りの順）
- border-widthプロパティに指定する値には数値に単位を付けた『1px』，『1em』，『10%』といったものや
『thin』（細い枠線），『medium』（中くらいの太さの枠線），『thick』（太い枠線）といったキーワードを指定します。 - 負の値の指定は出来ません。
- 文字サイズや線の長さなどをプロパティの値に指定する単位は絶対指定と相対指定があります。
※border-widthプロパティで%指定した場合、
親要素の横幅を規準とした相対指定になります。- 絶対指定
- 『in』（インチ），『cm』（センチメートル），『mm』（ミリメートル），『pt』（ポイント），『pc』（パイカ）など
- 相対指定
- 『em』（エム），『ex』（エックスハイト），『px』（ピクセル），『%』（パーセント）など
- 初期値は、『medium』になります。
- また、キーワードで指定した場合の太さは仕様では定められてなく、ブラウザに依存します。
- 値の継承はしません
- 『-top』（上）,『-bottom』（下）,『-right』（右）,『-left』（左）といった修飾子を負荷したプロパティによって、各方向を個別に指定することもできます。
- 上
- border-top-width
- 下
- border-bottom-width
- 右
- border-right-width
- 左
- border-left-width