CSS を使うと,あらゆる要素に“枠”をつけることができる。これにより,無駄な記述をしないで上手なデザインを施すことができる。
枠はマージンの内側に描かれる。まず,枠を設けるのにまず考えるのは“太さ”であるが,これは次の属性で指定する。
border-top-width: (長さ または キーワード);
border-bottom-width: (長さ または キーワード);
border-left-width: (長さ または キーワード);
border-right-width: (長さ または キーワード);
この属性は全要素について適用される。継承はされない。もし,継承されるとすると枠だらけというものすごいデザインになってしまい,不自然になってしまう。
長さは単位を伴って与えるが,パーセント指定は許されていない。また,キーワード thin,medium,thick があり,これはとくに実際の長さと関連づけられてはいないが,この順で太くなることは確かである。初期値は medium。
枠の太さに関しては短縮属性が定義されている。
border-width: (長さ または キーワード;1 値から 4 値);
border-width 短縮属性は,margin 短縮属性と同じように,指定された値が
この順に半角スペースで区切って指定する。
負の値を与えることはできない。
IE4/5 border-width に関係する属性は置換されていないインライン要素には適用されない。
IE3 border-width に関係する属性はサポートされていない。枠そのものがサポートされていない。
border-style 属性は,枠の描かれ方を指定する。すべての要素について適用され,継承はされない。
border-style: (キーワード;1 値から 4 値);
キーワードは次のものが指定可能である。
気をつけなければならないのは,この属性の初期値が none であるため,border-width を指定しただけでは枠は描かれないことである。逆に,border-style だけを指定した場合は,border-width の初期値が medium であるために,枠は描かれる。
与える値の数は 1 値から 4 値までで,値の数と指定のされ方の関係は margin 短縮属性やborder-width 短縮属性と同じである。枠のそれぞれの部分に異なった描かれ方を指定することができるということである。
<P>CSS では,あらゆる要素に<SPAN STYLE="border-width: thin; border-style: outset;">枠を描く</SPAN>ことができます。</P>
<P STYLE="border-style: dashed double;">枠を描くためには,少なくとも border-style 属性を指定する必要があります。</P>
CSS では,あらゆる要素に枠を描くことができます。
枠を描くためには,少なくとも border-style 属性を指定する必要があります。
ブラウザはすべてのキーワードをそのとおり処理せずに,solid と同様に扱うこともある。
あとで詳しく解説するが,背景色は枠を含めた内側に適用される。
IE4/5 border-style 属性は置換されていないインライン要素には適用されない。また,dotted,dashed は solid と同じ扱いになる。
IE3 border-style 属性はサポートされていない。
NN4 インライン要素に枠を指定するとその要素はブロック要素と同じ扱いになる。また,dotted,dashed は solid と同じ扱いになる。border-style 属性に 2 値以上を指定すると意図どおりにならないことがある。枠を表示させるためには,border-style と border-width をあわせて指定しなければならない。したがって,上の後者の例には枠は表示されない。