ホーム >>> HTML整理ノート

borderスタイルの指定法(no2)

■各スタイルを個別に指定
書式 
 {border-style:値}
 {border-width:値}
 {border-color:値}
(値) ・・・半角スペースで区切って複数指定できる。
 ・1個の値を設定した場合・・・四辺に適用
 ・2個の値を設定した場合・・・1個めが上下に、2個めが左右に適用
 ・3個の値を設定した場合・・・1個めが上辺に、2個めが左右に、3個めが下辺に適用
 ・4個の値を設定した場合・・・1個めから順に上,右,下,左に適用
 

Sample

1個だけ指定した場合

2個指定した場合

3個指定した場合

4個指定した場合

Sample Source......................................................................>>>

<p style="border-style:solid;border-width:1px;border-color:red;width:300px">
    1個だけ指定した場合</p> 
<p style="border-style:solid double;border-width:1px 8px;border-color:red #33ff00;
    width:300px">2個指定した場合</p>
<p style="border-style:solid double dashed;border-width:1px 8px 1mm;
        border-color:red #33ff00 gray;width:300px">3個指定した場合</p>
<p style="border-style:solid double dashed ridge;border-width:1px 8px 1mm 0.5cm;
    border-color:red #33ff00 gray #ffcccc;width:300px">4個指定した場合</p>