線種・色もまとめて指定
先ほどは、色・線種・太さのそれぞれについて、上下左右の値を一括して指定する方法でした。 実は、そのほかに、上下左右のそれぞれについて、色・線種・太さを一括して指定する方法もあります。
例えば、
border-left : 3px double red; border-bottom: 4px double maroon; border-right : 1px dotted yellow; border-top : 1px dashed skyblue;
のように指定すると、
上下左右を個別に指定した枠
このように表示されます。
上下左右それぞれの枠線ごとに、その線の太さ・線種・色をまとめて指定しているわけですね。 指定する順番に規定はありませんので、「 3px double yellow 」と記述しても「 yellow 3px double 」と記述しても、意味は同じです。
線種や色別にまとめて指定
さて、ここまで分かれば、あとはご説明するまでもないかもしれませんね。
border-color : 枠線の色 border-style : 枠線の種類 padding : 枠線と中身との間隔
も同様に、4辺を個別に設定可能です。
順番は、「上・右・下・左」の順で解釈されます。（上から順に「時計回り」ですね）
例えば、
border-color : yellow green red blue;
と指定すれば、上が黄色、右が緑色、下が赤色、左が青色 となります。
これは、
border-top-color border-right-color border-bottom-color border-left-color
……と、個別に記述することも可能です。
指定方法の選択
複数の値をまとめて指定する場合の指定方法は、
border-width border-style border-color
のように、スタイルの種類別に指定するか、
border-left border-right border-top border-bottom
のように、辺ごとに指定するかは、 そのときのわかりやすさで決めれば良いでしょう。
どちらの方法を用いても、実現できる内容は同じですので、そのときのデザインに応じて、分かりやすい方（楽に記述できる方）を選択して下さい。
※border-left や border-width のどちらにしても、まとめて指定可能なのは、border（枠線）に関するスタイルのみで、例えば padding（内側の余白）などの「borderと無関係なスタイル」を border-left プロパティの値として記述することはできません。 従って、padding を設定したい場合は、padding プロパティを別途記述しなければなりません。
4辺とも同じスタイルでよい場合のもっとも楽な記述
なお、4辺ともに同じスタイルでよい場合は、次のような非常に簡単な記述方法が使用できます。
border : 4px double purple;
borderプロパティに、太さ・線種・色の3つを指定しています。
こう指定すると、
上下左右が全部『 4ピクセル・二重線・紫色 』の枠
のように表示されます。
4辺が同じスタイルになっていますね。
このように、上下左右全部が同じスタイルで構わない場合は、非常に短い記述で枠を記述できます。 これも覚えておくと良いでしょう。
おわりに
今回は、上下左右の枠線スタイルを別々に指定する方法をご紹介致しました。
この方法で、ぜひ、様々なデザインを実現してみて下さい。
【関連記事】
