1．枠線のスタイルを指定する。
border-style : キーワード; 上下左右のスタイル
border-style : キーワード キーワード; 上下、左右のスタイル
border-style : キーワード キーワード キーワード; 上、左右、下のスタイル
border-style : キーワード キーワード キーワード キーワード; 上、右、下、左のスタイル
＜キーワード＞
none : 枠線表示なし（デフォルト）
solid : 実線
double : 二重線
dotted : 点線
dashed : 破線
groove : くぼみ線
ridge : 浮きだし線
inset : インセット
outset : アウトセット
（例）
<DIV style="border-style:solid;">実線を設定</DIV><br>
<DIV style="border-style:double;">二重線を設定</DIV><br>
<DIV style="border-style:dotted;">点線を設定</DIV><br>
<DIV style="border-style:dashed;">破線を設定</DIV><br>
<DIV style="border-style:groove;">くぼみ線を設定</DIV><br>
<DIV style="border-style:ridge;">浮き出し線を設定</DIV><br>
<DIV style="border-style:inset;">インセットを設定</DIV><br>
<DIV style="border-style:outset;">アウトセットを設定</DIV><br>
（結果）
実線を設定
二重線を設定
点線を設定
破線を設定
くぼみ線を設定
浮き出し線を設定
インセットを設定
アウトセットを設定
２．上下左右の枠線のスタイルを個別に指定する。
border-top-style : キーワード; 上部の枠線のスタイル
border-bottom-style : キーワード; 下部の枠線のスタイル
border-right-style : キーワード; 右部の枠線のスタイル
border-left-style : キーワード; 左部の枠線のスタイル
＜キーワード＞
none : 枠線表示なし（デフォルト）
solid : 実線
double : 二重線
dotted : 点線
dashed : 破線
groove : くぼみ線
ridge : 浮きだし線
inset : インセット
outset : アウトセット
（例）
<DIV style="border-top-style:dottedt; border-left-style:dotted;">上と左だけスタイルを設定しています。<br></DIV>
（結果）
上と左だけスタイルを設定しています。
３．枠線の色を指定する
border-color : 色指定; 上下左右の色
border-color : 色指定 色指定; 上下、左右の色
border-color : 色指定 色指定 色指定; 上、左右、下の色
border-color : 色指定 色指定 色指定 色指定; 上、右、下、左の色
この属性は枠線のボーダースタイルを設定していないと効果がありません。
＜色指定＞
#RRGGBB・・・・・R（赤）、G（緑）、B（青）の部分に２桁ずつの英数字（1からF）を指定。
#RGB・・・・・・・・ 上の方法で２桁が同じ場合に省略して指定。
例： #11aa66 → #1a6 、#0055ff → #05f
rgb(R,G,B)・・・ ・R（赤）、G（緑）、B（青）の部分に 0〜255 の数字を指定。
rgb(R%,G%,B%)・・R（赤）、G（緑）、B（青）の部分に 0〜100 の数字で％指定。
カラーネーム・・るカラーネームを記入する。
例： red blue green yellow orange purple pink black white
色指定に関してはHTML講座のこちらも参照してみてください
＜キーワード＞
transparent : 透明色（デフォルト）
（例）
<div style="border-style: dashed; border-color: red blue yellow green;"><br>枠線の上下左右で違う色を指定<br></div>
（結果）
枠線の上下左右で違う色を指定
４．上下左右の枠線の色を個別に指定する。
border-top-color : 色指定; 上部の枠線の色
border-bottom-color : 色指定; 下部の枠線の色
border-right-color : 色指定; 右部の枠線の色
border-left-color : 色指定; 左部の枠線の色
この属性は枠線のボーダースタイルを設定していないと効果がありません。
＜色指定＞
#RRGGBB・・・・・R（赤）、G（緑）、B（青）の部分に２桁ずつの英数字（1からF）を指定。
#RGB・・・・・・・・ 上の方法で２桁が同じ場合に省略して指定。
例： #11aa66 → #1a6 、#0055ff → #05f
rgb(R,G,B)・・・ ・R（赤）、G（緑）、B（青）の部分に 0〜255 の数字を指定。
rgb(R%,G%,B%)・・R（赤）、G（緑）、B（青）の部分に 0〜100 の数字で％指定。
カラーネーム・・るカラーネームを記入する。
例： red blue green yellow orange purple pink black white
色指定に関してはHTML講座のこちらも参照してみてください
＜キーワード＞
transparent : 透明色（デフォルト）
（例）
<div style="border-style:double; border-left-color:red; border-right-color:red;">枠線の横だけ赤くしてみました。</div>
（結果）
枠線の横だけ赤くしてみました。
５．枠線の太さを設定する
border-width : 数値指定 又は キーワード; 上下左右の枠線の太さを設定
border-width : 数値指定 数値指定; 上下、左右の設定
border-width : 数値指定 数値指定 数値指定; 上、左右、下の設定
border-width : 数値指定 数値指定 数値指定 数値指定; 上、右、下、左の設定
この属性は枠線のスタイルを設定していないと効果がありません。
＜キーワード＞
thin : 細い枠線
medium : 普通の枠線（デフォルト）
thick : 太い枠線
（例）
<DIV style="border-style:ridge; border-width:10px 20px 30px 40px;">四方向の枠線の太さを変えてみました</DIV>
（結果）
四方向の枠線の太さを変えてみました
６．上下左右の枠線の太さを個別に指定する。
border-top-width : キーワード 又は 数値指定; 上部枠線の太さ
border-bottom-width : キーワード 又は 数値指定; 下部枠線の太さ
border-right-width : キーワード 又は 数値指定; 右部枠線の太さ
border-left-width : キーワード 又は 数値指定; 左部枠線の太さ
記述例
<div style="border-style :groove; border-right-width:40px; border-left-width:30;">左右の枠線だけ太くしてみました。</div>
左右の枠線だけ太くしてみました。
７．枠線の設定をまとめてする。
border : boder-styleの値 border-colorの値 border-widthの値; 上下左右、すべて同じ設定
指定したい属性を半角スペースで区切って記述します。
boder-style：スタイル・・・省略不可
border-color：色・・・・省力可
border-width：太さ・・・・省略可
（例）
<div style="border : double red 10px;">四方向共に同じ設定になります</div>
（結果）
四方向共に同じ設定になります
８．上下左右の枠線の設定をまとめてする。
border-top : boder-styleの値 border-colorの値 border-widthの値; 上方向に設定
border-bottom : boder-styleの値 border-colorの値 border-widthの値; 下方向に設定
border-right : boder-styleの値 border-colorの値 border-widthの値; 右方向に設定
border-left : boder-styleの値 border-colorの値 border-widthの値; 左方向に設定
指定したい属性を半角スペースで区切って記述します。
boder-style：スタイル・・・省略不可
border-color：色・・・・省力可
border-width：太さ・・・・省略可
（例）
<div style="border-top:dashed #99f 10px; border-bottom : dotted #99f 10px; border-right:none; border-left:none;">上は破線で、下は点線、左右は枠線無し</div>
（結果）
上は破線で、下は点線、左右は枠線無し
９．ボックス領域の幅と高さを設定する
width : キーワード、数値指定、%指定; 横幅
height : キーワード、数値指定、%指定; 高さ
＜キーワード＞
auto：ブラウザが自動調節する
＜%指定＞
親要素のボックス領域に対する割合で指定する
＜数値指定＞
単位を付けた数値を使って余白を指定する。
（例）
<DIV style="width: 300px; height: 100px; background-color:olive;">幅が300px、高さが100pxのボックス領域です。</DIV>
（結果）
幅が300px、高さが100pxのボックス領域です。
１０．ボックスにマージンを指定する
margin : キーワード、数値指定、%指定; 上下左右の枠線のマージン
margin : 数値指定 数値指定; 上下、左右の設定
margin : 数値指定 数値指定 数値指定; 上、左右、下の設定
margin : 数値指定 数値指定 数値指定 数値指定; 上、右、下、左の設定
:*ボックス領域とその内側にあるボックス領域の外枠との間隔(マージン)
＜キーワード＞
auto：ブラウザが自動調節する
＜%指定＞
親要素のボックス領域に対する割合で指定する
＜数値指定＞
単位を付けた数値を使ってマージンを指定する。
（例）
<dl style="background-color:yellow">
<dt style="background-color:silver">ボックス１</dt>
<dd style="background-color:aqua; margin:10px 100px;">マージン 上下：10px 左右：100px</dd>
<dt style="background-color:silver">ボックス２</dt>
<dd style="background-color:lime; margin:10%;">マージン 上下左右：10%</dd>
<dt style="background-color:silver">ボックス３</dt>
<dd style="background-color:purple; margin:2mm 2mm 2mm 2mm;">マージン 上下左右：2mm</dd>
</dl>
（結果）
- ボックス１
- マージン 上下：10px 左右：100px
- ボックス２
- マージン 上下左右：10%
- ボックス３
- マージン 上下左右：2mm
１１．上下左右の枠線のマージンを個別に指定する。
margin-top : キーワード、数値指定、%指定; 上方向
margin-bottom : キーワード、数値指定、%指定; 下方向
margin-right : キーワード、数値指定、%指定; 右方向
margin-left : キーワード、数値指定、%指定; 左方向
＜キーワード＞
auto：ブラウザが自動調節する
＜%指定＞
親要素のボックス領域に対する割合で指定する
＜数値指定＞
単位を付けた数値を使ってマージンを指定する。
（例）
<DIV style="margin-right: 200px; background-color:pink;">右にマージンを200px設定しました</DIV>
（結果）
右にマージンを200px設定しました
１２．余白を設定する
padding : キーワード、数値指定、%指定; 四方向に設定
padding : 10px 20px; 上下、左右に設定
padding : 10px 20px 30px; 上、左右、下の設定
padding : 10px 20px 30px 40; 上、右、下、左の設定
*ボックス領域とコンテンツの間隔
＜キーワード＞
auto：ブラウザが自動調節する
＜%指定＞
親要素のボックス領域に対する割合で指定する
＜数値指定＞
単位を付けた数値を使って余白を指定する。
（例）
<dl style="background-color:yellow">
<dt style="background-color:silver">ボックス１</dt>
<dd style="background-color:aqua; padding:10px 100px;">余白 上下：10px 左右：100px</dd>
<dt style="background-color:silver">ボックス２</dt>
<dd style="background-color:lime; padding:10%;">余白 上下左右：10%</dd>
<dt style="background-color:silver">ボックス３</dt>
<dd style="background-color:purple; padding:2mm 2mm 2mm 2mm;">余白 上下左右：2mm</dd>
</dl>
（結果）
- ボックス１
- 余白 上下：10px 左右：100px
- ボックス２
- 余白 上下左右：10%
- ボックス３
- 余白 上下左右：2mm
１３．上下左右の枠線の余白を個別に指定する。
padding-top : キーワード、数値指定、%指定; 上方向の余白
padding-bottom : キーワード、数値指定、%指定; 下方向の余白
padding-right : キーワード、数値指定、%指定; 右方向の余白
padding-left : キーワード、数値指定、%指定; 左方向の余白
＜キーワード＞
auto：ブラウザが自動調節する
＜%指定＞
親要素のボックス領域に対する割合で指定する
＜数値指定＞
単位を付けた数値を使って余白を指定する。
（例）
<div style="padding-top : 40px;padding-left : 30px;padding-bottom : 10px;">上40px下10px左30pxで設定しています</dl>
（結果）
上40px下10px左30pxで設定しています