CSSで枠線を設定する方法

テーブルセルや画像には、border属性を記述することで枠線を表示させることができます。この他に、（border）を使用することでテーブルセルや画像以外の様々な要素に、枠線をデザインすることが可能です。

今回はその枠線の設定の仕方をご紹介します。

枠線の設定の仕方

実際に記述する場合はこの様になります。

４方向に線を表示させてしまって良い場合は、上記の様に書くだけで枠線の設定は完了です。その他に、下記の様に記述することで、４方向の線をそれぞれ細かくデザインを指定することが可能です。

・上の線を指定　border-top
・右の線を指定　border-right
・下の線を指定　border-bottom
・左の線を指定　border-left

また、（border-style）,（border-width）,（border-color）でそれぞれの種類、幅、色だけを指定することもできます。

borderの太さの値

borderの太さの値は、px/em/exなどの単位で指定する方法と、キーワードで指定する方法があります。単位で指定する場合はいつもと同じですが、キーワードは以下の３つから選択します。

・細い　thin
・通常　medium
・太い　thick

キーワードで設定すると、いずれかの太さに適した太さにブラウザによって調整された線が表示されます。

borderの色の設定

色の設定はカラーコドかカラーネームで行います。また、この２つのほかに（transparent）を記述すると、線の色を透明に指定することができます。