CSS 要素に枠線（ボーダー）をつける方法まとめ
CSSで要素に枠線（ボーダー）をつける方法をまとめて紹介します。
以下のように、border: 種類 太さ 色;の形式で指定します。
<div style="border: solid 1px red;">
テキスト
</div>
<div style="border: dotted 3px blue;">
テキスト２
</div>
<div style="border: double 5px #000;">
テキスト３
</div>また、border-上下左右で上下左右のうち、指定した部分のみを指定できます。
上下左右の部分にはtop(上), bottom（下）, left（左）, right（右）のいづれかを指定します。
<div style="border-top: solid 1px red;">
テキスト
</div>
<div style="border-left: dotted 3px blue;">
テキスト２
</div>
<div style="border-bottom: double 5px #000;">
テキスト３
</div>枠線の種類
枠線の種類には、以下があります。
- solid
- 1本線で表示
- double
- 2本線で表示
- dashed
- 破線で表示
- dotted
- 点線で表示
- ridge
- 浮き出た線で表示
- groove
- 凹んだ線で表示
- inset
- 凹んだように表示
- outset
- 浮き出たように表示
- none
- 表示しない
border-styleで枠線の種類のみを設定できます。
また、border-上下左右-styleで上下左右のうち、指定した部分のみを指定できます。
上下左右の部分にはtop(上), bottom（下）, left（左）, right（右）のいづれかを指定します。
枠線の色
文字の色はredやblueのようにすでに定義された色かもしくは、色コードで指定します。
色コードとは#AB3F7Cのように、先頭の#のあとに16進数の文字を6桁指定します。
先頭から２文字が赤、真ん中の２文字が緑、末尾の２文字が青の値に対応しています。
赤緑青をそれぞれ00(暗)〜FF(明)の値で指定します。
border-colorで枠線の色のみを設定できます。
また、border-上下左右-colorで上下左右のうち、指定した部分のみを指定できます。
上下左右の部分にはtop(上), bottom（下）, left（左）, right（右）のいづれかを指定します。
枠線の太さ
border-widthで枠線の色のみを設定できます。
また、border-上下左右-widthで上下左右のうち、指定した部分のみを指定できます。
上下左右の部分にはtop(上), bottom（下）, left（左）, right（右）のいづれかを指定します。