枠線関連の主なプロパティ。

CSS(カスケーディングスタイルシート)での枠線関連のプロパティ(属性)について、主なものについて解説します。

枠線に関する詳細は、余白関連の主なプロパティ内のCSSでの余白と枠線の概念をご覧ください。
以下の解説では値について一部解説を省略しております。詳細はCSSリファレンス内の各プロパティの記事をご覧ください。

`border-○○-color` プロパティ(ボーダの色)。

border-○○-color プロパティとは、ボーダの色です。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にボーダの色を指定出来ます。

具体的には以下のようになります。

これらのプロパティの値には以下のものが取れます。

border-○○-color プロパティを指定しない場合、当該要素のcolor プロパティ(前景色)の値をデフォルト値として採ります。

`border-color` プロパティ(上下左右のボーダ色の一括指定)。

border-color プロパティは、上下左右のボーダ色を一括指定するプロパティ表記法です。

指定方法は一個ないし四個の数値を指定すると言うものです。

値の個数に依る指定方法は以下のようになります。

一個

上下左右に一括して同じ値を指定します。

特に上下左右の枠線を同じ色にする場合には、
```
border-color: 色コード;
```
と記述するだけで済みます。

二個

上と下に与える値
右と左に与える値

の順に半角空白で区切って並べます。

上下のボーダが同じ色で、且つ左右のボーダも同じ(但し上下と左右では異なる)色の場合に便利です。

三個

上に与える値
右と左に与える値
下に与える値

の順に半角空白で区切って並べます。

左右のボーダは同じ色でも、上と下は異なった色にしたい場合に用います。

四個

上に与える値
右に与える値
下に与える値
左に与える値

の順に半角空白で区切って並べます。

上から時計廻りと覚えれば良いでしょう。

特に左右の値が異なった色とする場合は、左右を個別に指定するか、この記述法を用いるかのどちらかとなります。

これらの値は、border-○○-color プロパティでの値と全く同じものが取れます。

`border-○○-style` プロパティ(ボーダの形)。

border-○○-style プロパティとは、ボーダの形です。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にボーダの形を指定出来ます。

具体的には以下のようになります。

これらのプロパティの値には以下のものが取れます。

border-○○-style プロパティを指定しない場合、none すなわち枠線なしがデフォルト値して採られます。

`border-style` プロパティ(上下左右のボーダの形の一括指定)。

border-style プロパティは、上下左右のボーダの形を一括指定するプロパティ記述法です。

指定方法は一個ないし四個の数値を指定すると言うものです。

値の個数に依る指定方法は以下のようになります。

一個

上下左右に一括して同じ値を指定します。

特に上下左右の枠線を非表示にする場合には、
```
border-style: none;
```
と記述するだけで済みます。

二個

上と下に与える値
右と左に与える値

の順に半角空白で区切って並べます。

上下のボーダが同じ形で、且つ左右のボーダも同じ(但し上下と左右では異なる)形の場合に便利です。

三個

上に与える値
右と左に与える値
下に与える値

の順に半角空白で区切って並べます。

左右のボーダは同じ形でも、上と下は異なった形にしたい場合に用います。

四個

上に与える値
右に与える値
下に与える値
左に与える値

の順に半角空白で区切って並べます。

上から時計廻りと覚えれば良いでしょう。

特に左右の値が異なった形とする場合は、左右を個別に指定するか、この記述法を用いるかのどちらかとなります。

これらの値は、border-○○-style プロパティでの値と全く同じものが取れます。

`border-○○-width` プロパティ(ボーダの幅)。

border-○○-width プロパティとは、ボーダの幅、すなわちボーダの太さです。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にボーダの幅を指定出来ます。

具体的には以下のようになります。

これらのプロパティの値には以下のものが取れます。

border-○○-width プロパティを指定しない場合、当該プロパティ値は 0となります。

`border-width` プロパティ(上下左右のボーダ幅の一括指定)。

border-width プロパティは、上下左右のボーダ幅を一括指定するプロパティ記述法です。

指定方法は一個ないし四個の数値を指定すると言うものです。

値の個数に依る指定方法は以下のようになります。

一個

上下左右に一括して同じ値を指定します。

特に上下左右の枠線を幅零(すなわち非表示)にする場合には、
```
border-width: 0;
```
と記述するだけで済みます。

二個

上と下に与える値
右と左に与える値

の順に半角空白で区切って並べます。

上下のボーダが同じ幅で、且つ左右のボーダも同じ(但し上下と左右では異なる)幅の場合に便利です。

三個

上に与える値
右と左に与える値
下に与える値

の順に半角空白で区切って並べます。

左右のボーダは同じ幅でも、上と下は異なった幅にしたい場合に用います。

四個

上に与える値
右に与える値
下に与える値
左に与える値

の順に半角空白で区切って並べます。

上から時計廻りと覚えれば良いでしょう。

特に左右の値が異なった幅とする場合は、左右を個別に指定するか、この記述法を用いるかのどちらかとなります。

これらの値は、border-○○-width プロパティでの値と全く同じものが取れます。

`border-○○` プロパティ(ボーダ関連プロパティ値の一括指定)。

border-○○ プロパティとは、ボーダ関連の全てのプロパティすなわちボーダの色, 形及び幅(太さ)を一括指定する表記法です。

○○の部分に上下左右を表す語が入り、それに依り上下左右個別にボーダ関連の全てのプロパティを纏めて指定出来ます。

具体的には以下のようになります。

これらのプロパティの値としては、

ボーダの色：border-○○-color プロパティでの値
ボーダの形：border-○○-style プロパティでの値
ボーダの幅(太さ)：border-○○-width プロパティでの値

のうち、一つ以上を半角空白で区切って順不同で並べます。

勿論、上位要素のボーダの全てのプロパティ値を継承する場合は、inherit が使えます。

但し、インターネットエクスプローラでは6.0まで inherit 値は無効になります。

`border` プロパティ(上下左右のボーダ色・形・幅の一括指定)。

borderプロパティは、上下左右のボーダ関連の全てのプロパティ、すなわちボーダの色, 形及び幅(太さ)を一括指定するプロパティ記法です。

このプロパティではボーダの色, 形及び幅とも、上下左右に同じ値が一律に指定される事となります。

記述する値は、border-○○ プロパティの場合と全く同じです。