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

borderスタイルの指定法（no2）

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

Sample

１個だけ指定した場合

２個指定した場合

３個指定した場合

４個指定した場合

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

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