スタイルシート属性borderは、枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border: width style color
属性
-
width
-
線の幅を 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
| 値 |
説明 |
| thin |
細い線 |
| medium |
通常の線（規定値） |
| thick |
太い線 |
-
style
-
線のスタイルを以下の値の中から指定します。スタイルの違いは線の幅をある程度太くしないと見分けがつきません。
| 値 |
説明 |
| none |
線無し（規定値） |
| solid |
実線 |
| dashed |
粗い点線 |
| dotted |
点線 |
| double |
２重線 |
| groove |
谷線 |
| ridge |
山線 |
| inset |
内線 |
| outset |
外線 |
| inherit |
継承 |
-
color
-
枠線の色を指定します。
対応状況
| Webブラウザ |
対応状況 |
| Internet Explorer 6.0 |
○ |
| FireFox 3.0.4 |
○ |
| Google Chrome 0.3 |
○ |
| Opera 9.62 |
○ |
| Safari 3.2.1 |
○ |
使用例と表示サンプル
<p style="border: 10px groove yellow">groove</p>
<p style="border: 10px ridge yellow">ridge</p>
<p style="border: 10px inset yellow">inset</p>
<p style="border: 10px outset
yellow">outset</p>
groove
ridge
inset
outset
スタイルシート属性 border-top は、上の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-top:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
使用例と表示サンプル
<p style="border-top: 3px dashed">dashed</p>
<p style="border-top: 3px dotted">dotted</p>
<p style="border-top: 3px double">double</p>
dashed
dotted
double
スタイルシート属性 border-right は、右の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-right:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
対応状況
| Webブラウザ |
対応状況 |
| Internet Explorer 6.0 |
○ |
| FireFox 3.0.4 |
○ |
| Google Chrome 0.3 |
○ |
| Opera 9.62 |
○ |
| Safari 3.2.1 |
○ |
使用例と表示サンプル
<p style="border-right: thick solid blue">border-right: thick solid blue</p>
border-right: thick solid blue
スタイルシート属性 border-bottom は、下の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-bottom:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
対応状況
| Webブラウザ |
対応状況 |
| Internet Explorer 6.0 |
○ |
| FireFox 3.0.4 |
○ |
| Google Chrome 0.3 |
○ |
| Opera 9.62 |
○ |
| Safari 3.2.1 |
○ |
使用例と表示サンプル
<p style="border-bottom: thin solid">thin</p>
<p style="border-bottom: medium solid">medium</p>
<p style="border-bottom: thick solid">thick</p>
thin
medium
thick
スタイルシート属性 border-left は、左の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-left:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
対応状況
| Webブラウザ |
対応状況 |
| Internet Explorer 6.0 |
○ |
| FireFox 3.0.4 |
○ |
| Google Chrome 0.3 |
○ |
| Opera 9.62 |
○ |
| Safari 3.2.1 |
○ |
使用例と表示サンプル
<p style="border-left: thick solid blue">border-left: thick solid blue</p>
border-left: thick solid blue
スタイルシート属性 border-width は、枠線の幅を指定します。枠線とは margin と padding の境界線のことです。
書式
border-width:
top
right
bottom
left
属性
-
top
-
上の線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
right
-
右の線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
bottom
-
下の線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
left
-
左の線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
スタイルシート属性 border-top-width は、枠線の幅を指定します。
書式
border-top-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
スタイルシート属性 border-right-width は、枠線の幅を指定します。
書式
border-right-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
スタイルシート属性 border-bottom-width は、枠線の幅を指定します。
書式
border-bottom-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
スタイルシート属性 border-left-width は、枠線の幅を指定します。
書式
border-left-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
スタイルシート属性 border-style は枠線のスタイルを指定します。
書式
border-style:
top
right
bottom
left
属性
-
top
-
上の線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
right
-
右の線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
bottom
-
下の線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
left
-
左の線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
スタイルシート属性 border-top-style は、上の枠線のスタイルを指定します。
書式
border-top-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
スタイルシート属性 border-right-style は枠線のスタイルを指定します。
書式
border-right-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
スタイルシート属性 border-bottom-style は枠線のスタイルを指定します。
書式
border-bottom-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
スタイルシート属性 border-left-style は枠線のスタイルを指定します。
書式
border-left-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
スタイルシート属性 border-color は枠線の色を指定します。
書式
border-color:
top
right
bottom
left
属性
-
top
-
上の枠線の色を指定します。
-
right
-
右の枠線の色を指定します。
-
bottom
-
下の枠線の色を指定します。
-
left
-
左の枠線の色を指定します。
スタイルシート属性 border-color は、上の枠線の色を指定します。
書式
border-top-color:
color
属性
-
color
-
枠線の色を指定します。
スタイルシート属性 border-right-color は、右の枠線の色を指定します。
書式
border-right-color:
color
属性
-
color
-
枠線の色を指定します。
スタイルシート属性 border-bottom-color は、下の枠線の色を指定します。
書式
border-bottom-color:
color
属性
-
color
-
枠線の色を指定します。
スタイルシート属性 border-left-color は、左の枠線の色を指定します。
書式
border-left-color:
color
属性
-
color
-
枠線の色を指定します。