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

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

■四辺の一括指定
　書式　{ border: 値}
　　・値はborder-style／border-width／border-colorの値を並べる。重複名はない
　　　　　　　ので，並び順は変わってよい。
　（例）<p style="border:thin solid navy">
　　　　<p style="border:1px dotted #66ff33">

■各辺の個別指定
　書式
　　　｛border-top: 値｝　　･･･上辺の線の色と幅
　　　｛border-right: 値｝　･･･右辺の線の色と幅
　　　｛border-bottom: 値｝ ･･･下辺の線の色と幅
　　　｛border-left: 値｝ ･･･左辺の線の色と幅

　　・(値）border-style／border-width／border-colorの値を並べる。重複名はない
　　　　　　　　ので，並び順は変わってよい。
　（例）<p style="border-top:thin solid navy">
　　　　<p style="border-left:1px dotted #00ff33">

■辺ごとに各スタイルを個別に指定
　書式
　　｛border-top-style: 値｝　　･･･上辺の枠線の形状を指定
　　｛border-top-width: 値｝　　･･･上辺の枠線の幅を指定
　　｛border-top-color: 値｝　　･･･上辺の枠線の色を指定
　　　　（right／bottom／left　も同様）
　(例）｛border-bottom-style: solid｝
　　　 ｛border-bottom-width: 5px｝
　　　 ｛border-bottom-color: #ff6699｝

Sample

四辺の一括指定

下辺だけの指定

左辺のスタイルを個別に指定

　四辺のスタイルを個別に指定

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

<p style="border:thin solid navy;width:300px">四辺の一括指定</p> 
<p style="border-bottom:2px dotted #66ff33;width:300px">下辺だけの指定</p>
<p style="border-left-style:double;border-left-width:6mm;
　　　　　border-left-color:#6699ff;width:300px">左辺のスタイルを個別に指定</p>
<p style="border-top:dotted 1px pink;border-right:outset 0.8cm #ffff99;
　　　border-bottom:double 6px red;border-left:ridge 4mm green;width:300px">　
　　四辺のスタイルを個別に指定</p