枠線の太さ

枠線の太さはborder-widthプロパティで指定します。下の単位を付けて具体的な太さを指定するか、「thin(細)」「 medium (中)」「thick (太)」 のキーワードを指定します。サンプルでは、border-styleプロパティをdashed、border-colorプロパティをblueに設定した枠線の幅を10ピクセルに設定しています。

1つの要素について、上下左右の枠線のそれぞれに別の太さを設定するこができます。border-widthプロパティに値を1つだけ設定すると、上下左右の枠線の太さがみな同じになりますが、値を2つ、3つ、4つの場合でそれぞれ異なる設定ができます。値を4つ列挙(それぞれの値の間は半角スペースを空ける)すると、先頭から順に上、右、下、左の太さを指定します。値を3つ列挙した場合は、上、左右、下、2つ列挙した場合は上下、左右の太さの設定になります。

borderプロパティでスタイル。色・太さを指定

枠線のスタイル、色、太さはまとめて指定することができます。枠線全体の場合はborderプロパティにスタイル、色、太さを表す値を列挙します。指定の順番は順不同です。また、スタイル、色、太さすべてを指定する必要もありません(スタイルは指定する必要があります)。サンプルではスタイルを「double」、色を「#00ff00」、太さを「10px」に指定しています。なお、プロパティを使用して上・下・左・右の枠線のスタイル・色・太さをまとめて指定することもできます。