要素の枠線を設定する方法を説明していきます。
border（ボーダー）
borderは、要素の枠線（外側の線）に関わる情報を一気に設定することが出来るプロパティです。
border：太さ 種類 色 ;
という風になっています。
border: 1px solid black;
例えば、この場合の意味は「1pxの太さで、実線、黒色の枠線」という意味になります。
border-width（ボーダーウィズ）
border-widthは、要素の枠線の太さを指定出来るプロパティです。
- キーワード：thin（細い線）、medium（普通の太さ）、thick（太い線）
- 数値：数値にpxやrem、％などの単位をつける
border-width:2px;
上・右・下・左の時計回り順で指定することも出来ます。
border-width: 2px 1px 4px 6px;
border-style（ボーダースタイル）
border-styleは、要素の枠線の装飾方法を指定出来るプロパティです。
- solid：実線
- dashed：破線
- dotted：点線
- double：二重線
- none：なし
- groove：立体的な谷型の線
- ridge：立体的な山形の線
- inset：囲まれた部分が凹んで見える立体的な線
- outset：囲まれた部分が浮き上がって見える立体的な線
border-style:solid;
上・右・下・左の時計回り順で指定することも出来ます。
border-style:solid dashed dotted double;
border-color（ボーダーカラー）
border-colorは、要素の枠線の色を指定出来るプロパティです。
- カラーコード：ハッシュ(#)で始まる３桁もしくは6桁のカラーコードを指定
- RGB値：rgbから書き始め、赤・緑・青の値を「,カンマ」で区切って指定。透明度も含める場合は、rgbaから書き始め、赤・緑・青・透明度の値を「,カンマ」で区切って指定。透明度は0～1の間で記述する。
- 色の名前：redやblueなどの決められた色の名前を指定
border-color:red;
上・右・下・左の時計回り順で指定することも出来ます。
border-color:red blue green tan;
border-radius（ボーダーレイディアス）
border-radiusは、要素の枠線の角を丸くすることが出来ます。
border-radius:10px;
コメント