
CSSでは、要素が生成する範囲をボックス(Box)と言います。
borderプロパティ
borderプロパティは、ボーダーの上下左右の枠線の太さ (border-widthプロパティ)、スタイル (border-styleプロパティ)、色の指定 (border-colorプロパティ)をまとめて行うプロパティです。値の指定は、半角スペースで区切ります。
太さ、スタイル、色の記述順序は特に決まっていません。また、指定する必要の無い値は省略できます。値を省略した場合、各プロパティのデフォルトの値が割り当てられますが、border-styleプロパティのデフォルト値は「none」なので、ボーダーを表示する場合は値を記述して下さい。
例)
div{ border: 1px solid #cdcdcd; width: 200px; } 本文) <div>テキストAAAaaa</div>
表示)
テキストAAAaaa
border-widthプロパティ
ボーダーの上下左右の太さを指定します。値は単位(px)をつけた数値の他、thin(細線)、medium(中太線)、thick(太線)
単位をつけた数値の上下左右との指定位置関係)
border-width: 1px 2px 1px 1px; border-width: 1px 2px 1px; border-width: 1px 2px; border-width: 1px; 上 1px、右 2px、下 1px、左 2px 上 1px、左右 2px、下 1px 上下 1px、左右 2px 上下左右 1px
border-styleプロパティ
ボーダーの上下左右のスタイルを指定します。値は、none(なにも無し)、solid(べた塗り)、double(二重線)、groove(立体線*くぼみ)、ridge(立体線*隆起)、inset(へこみ)、outset(盛りあがり)
border-colorプロパティ
ボーダーの上下左右の枠線の色を指定します。値は、カラーネーム、又はRGBコード。※カラーコード / カラーネーム