HTML要素の境界線を指定するには、CSSプロパティ「border」を使います。
border
スタイルシート属性borderは、枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border: width style color
属性
-
width
-
線の幅を 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
| 値 |
説明 |
| thin |
細い線 |
| medium |
通常の線（規定値） |
| thick |
太い線 |
-
style
-
線のスタイルを以下の値の中から指定します。スタイルの違いは線の幅をある程度太くしないと見分けがつきません。
| 値 |
説明 |
| none |
線無し（規定値） |
| solid |
実線 |
| dashed |
粗い点線 |
| dotted |
点線 |
| double |
２重線 |
| groove |
谷線 |
| ridge |
山線 |
| inset |
内線 |
| outset |
外線 |
| inherit |
継承 |
-
color
-
枠線の色を指定します。
使用例と表示サンプル
<p style="border: 1px solid black;">border: 1px solid black</p>
<p style="border: 10px groove yellow">border: 10px groove yellowborder: 10px groove yellow</p>
<p style="border: 10px ridge yellow;">border: 10px ridge yellow</p>
<p style="border: 10px inset yellow;">border: 10px inset yellow</p>
<p style="border: 10px outset yellow;">border: 10px outset yellow</p>
border: 1px solid black
border: 10px groove yellow
border: 10px ridge yellow
border: 10px inset yellow
border: 10px outset yellow
border-top
スタイルシート属性 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
スタイルシート属性 border-right は、右の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-right:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
使用例と表示サンプル
<p style="border-right: thick solid blue">border-right: thick solid blue</p>
border-right: thick solid blue
border-bottom
スタイルシート属性 border-bottom は、下の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-bottom:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
使用例と表示サンプル
<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
スタイルシート属性 border-left は、左の枠線の幅、スタイル、色を指定します。枠線とは margin と padding の境界線のことです。
書式
border-left:
width
style
color
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
-
color
-
枠線の色を指定します。
使用例と表示サンプル
<p style="border-left: thick solid blue">border-left: thick solid blue</p>
border-left: thick solid blue
border-width
スタイルシート属性 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 は、枠線の幅を指定します。
書式
border-top-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
border-right-width
スタイルシート属性 border-right-width は、枠線の幅を指定します。
書式
border-right-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
border-bottom-width
スタイルシート属性 border-bottom-width は、枠線の幅を指定します。
書式
border-bottom-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
border-left-width
スタイルシート属性 border-left-width は、枠線の幅を指定します。
書式
border-left-width:
width
属性
-
width
-
線の幅を指定します。指定形式はスタイルシート属性 border の
width
属性値と同じです。
border-style
スタイルシート属性 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 は、上の枠線のスタイルを指定します。
書式
border-top-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
border-right-style
スタイルシート属性 border-right-style は枠線のスタイルを指定します。
書式
border-right-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
border-bottom-style
スタイルシート属性 border-bottom-style は枠線のスタイルを指定します。
書式
border-bottom-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
border-left-style
スタイルシート属性 border-left-style は枠線のスタイルを指定します。
書式
border-left-style:
style
属性
-
style
-
線のスタイルを指定します。指定形式はスタイルシート属性 border の
style
属性値と同じです。
border-color
スタイルシート属性 border-color は枠線の色を指定します。
書式
border-color:
top
right
bottom
left
属性
-
top
-
上の枠線の色を指定します。
-
right
-
右の枠線の色を指定します。
-
bottom
-
下の枠線の色を指定します。
-
left
-
左の枠線の色を指定します。
border-colorの使用例と表示サンプル
<p style="border-style: solid; border-color: red green #66ffcc blue;">border-color: red green #66ffcc blue</p>
border-color: red green #66ffcc blue
border-top-color
スタイルシート属性 border-color は、上の枠線の色を指定します。
書式
border-top-color:
color
属性
-
color
-
枠線の色を指定します。
border-right-color
スタイルシート属性 border-right-color は、右の枠線の色を指定します。
書式
border-right-color:
color
属性
-
color
-
枠線の色を指定します。
border-bottom-color
スタイルシート属性 border-bottom-color は、下の枠線の色を指定します。
書式
border-bottom-color:
color
属性
-
color
-
枠線の色を指定します。
border-left-color
スタイルシート属性 border-left-color は、左の枠線の色を指定します。
書式
border-left-color:
color
属性
-
color
-
枠線の色を指定します。