margin,padding,borderイメージ

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コード。※カラーコード / カラーネーム