Border
ボーダーは、要素の周りに罫線を引きます。
罫線は、種類・太さ・色を選択できます。また、上下左右独立して指定できます。
ボーダーの種類
罫線の種類をキーワードで指定します。
キーワードは、8種類あります。Internet Explorer 4.0では、「dotted」と「dashed」は、サポートしていません。
{ border-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset }
| dotted | dashed | |
| solid | double | |
| groove | ridge | |
| inset | outset |
ボーダーの太さ
罫線の太さを指定します。値は、数値と3つのキーワードで指定できます。
{ border-width : length in | length cm | length mm | length pt | length pc | length px | thin | medium | thick }
| thin | 2px | |
| medium | 4px | |
| thick | 6px |
ボーダーの色
罫線の色を指定します。色の指定は、「COLOR」プロパティと同じです。
{ border-color : Color Nane | #RRGGBB | brgb(RRR,GGG,BBB) }
上ボーダーの指定
要素の上に罫線を引きます。
{ border-top: : border-width | border-style | border-color }
<p style="border-top: 2px solid rgb(250,102,0); padding: 2px 8px;">border Top</p.
border Top
下ボーダーの指定
要素の下に罫線を引きます。
{ border-bottom: : border-width | border-style | border-color }
<p style="border-bottom: 2px solid rgb(250,102,0); padding: 2px 8px;">Border Bottom</p>
Border Bottom
左ボーダーの指定
要素の左に罫線を引きます。
{ border-left : border-width | border-style | border-color }
<p style="border-left: 2px solid rgb(250,102,0); padding: 4px"> 4px;Border Left</p>
Border Left
右ボーダーの指定
要素の右に罫線を引きます。
{ border-right : border-width | border-style | border-color }
<p style="border-right: 2px solid rgb(250,102,0); padding: 4px 4px;">Border right</p>
Border right
 |
 |
|---|
