枠線をデザインする前に・・・

枠線とはどんな構成なの？

枠線とは要素の周りに引く線のことです。では、CSSには実際どんなプロパティを指定できるのでしょうか？CSSの枠線を設定するプロパティには、太さ、スタイル、色を指定するプロパティがあり、それらを上下左右個別に、またはまとめて指定できたり、上下左右のプロパティをすべてまとめて指定できたりします。

具体的にどんなプロパティがあるの！？

枠線を設定できるすべてのプロパティを下で簡単に説明しておきます。

枠線の指定できるデザイン	プロパティ	説明
スタイル	border-top-style	上の枠線のスタイルを指定できます。
	border-bottom-style	下の枠線のスタイルを指定できます。
	border-left-style	左の枠線のスタイルを指定できます。
	border-right-style	右の枠線のスタイルを指定できます。
	border-style	上下左右の枠線のスタイルをまとめて指定できます。
太さ	border-top-width	上の枠線の太さを指定できます。
	border-bottom-width	下の枠線の太さを指定できます。
	border-left-width	左の枠線の太さを指定できます。
	border-right-width	右の枠線の太さを指定できます。
	border-width	上下左右の枠線の太さをまとめて指定できます。
色	border-top-color	上の枠線の色を指定できます。
	border-bottom-color	下の枠線の色を指定できます。
	border-left-color	左の枠線の色を指定できます。
	border-right-color	右の枠線の色を指定できます。
	border-color	上下左右の枠線の色をまとめて指定できます。
スタイル、色、太さのすべて	border-top	上の枠線のスタイル、太さ、色をまとめて指定できます。
	border-bottom	下の枠線のスタイル、太さ、色をまとめて指定できます。
	border-left	左の枠線のスタイル、太さ、色をまとめて指定できます。
	border-right	右の枠線のスタイル、太さ、色をまとめて指定できます。
	border	上下左右の枠線のスタイルを、太さ、色をまとめて指定できます。

枠線の注意事項！

※枠線の太さのみを設定しても、スタイルを設定しないとスタイルが「none」と認識されるため枠線は表示されません。
※枠線の色を指定しないと、要素の文字列の色（colorプロパティ）が適応されます。
※枠線のスタイルのみを指定しても、自動的に太さがmedium（Windows Internet Explorer では4px）と指定されるので、枠線は表示されます。なお、太さをキーワードで指定するとブラウザごとに表示が異なります。