HTML要素の境界線を指定するには、CSSプロパティ「border」を使います。

border

スタイルシート属性borderは、枠線の幅、スタイル、色を指定します。枠線とは marginpadding の境界線のことです。

書式

border: width style color

属性

width
線の幅を 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
説明
thin 細い線
medium 通常の線(規定値)
thick 太い線
style
線のスタイルを以下の値の中から指定します。スタイルの違いは線の幅をある程度太くしないと見分けがつきません。
説明
none 線無し(規定値)
solid 実線
dashed 粗い点線
dotted 点線
double 2重線
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 は、上の枠線の幅、スタイル、色を指定します。枠線とは marginpadding の境界線のことです。

書式

border-top: width style color

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
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 は、右の枠線の幅、スタイル、色を指定します。枠線とは marginpadding の境界線のことです。

書式

border-right: width style color

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
color
枠線の色を指定します。

使用例と表示サンプル

<p style="border-right: thick solid blue">border-right: thick solid blue</p>

border-right: thick solid blue

border-bottom

スタイルシート属性 border-bottom は、下の枠線の幅、スタイル、色を指定します。枠線とは marginpadding の境界線のことです。

書式

border-bottom: width style color

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
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 は、左の枠線の幅、スタイル、色を指定します。枠線とは marginpadding の境界線のことです。

書式

border-left: width style color

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
color
枠線の色を指定します。

使用例と表示サンプル

<p style="border-left: thick solid blue">border-left: thick solid blue</p>

border-left: thick solid blue

border-width

スタイルシート属性 border-width は、枠線の幅を指定します。枠線とは marginpadding の境界線のことです。

書式

border-width: top right bottom left

属性

top
上の線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
right
右の線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
bottom
下の線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
left
左の線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-top-width

スタイルシート属性 border-top-width は、枠線の幅を指定します。

書式

border-top-width: width

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-right-width

スタイルシート属性 border-right-width は、枠線の幅を指定します。

書式

border-right-width: width

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-bottom-width

スタイルシート属性 border-bottom-width は、枠線の幅を指定します。

書式

border-bottom-width: width

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-left-width

スタイルシート属性 border-left-width は、枠線の幅を指定します。

書式

border-left-width: width

属性

width
線の幅を指定します。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-style

スタイルシート属性 border-style は枠線のスタイルを指定します。

書式

border-style: top right bottom left

属性

top
上の線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
right
右の線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
bottom
下の線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
left
左の線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。

border-top-style

スタイルシート属性 border-top-style は、上の枠線のスタイルを指定します。

書式

border-top-style: style

属性

style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。

border-right-style

スタイルシート属性 border-right-style は枠線のスタイルを指定します。

書式

border-right-style: style

属性

style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。

border-bottom-style

スタイルシート属性 border-bottom-style は枠線のスタイルを指定します。

書式

border-bottom-style: style

属性

style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。

border-left-style

スタイルシート属性 border-left-style は枠線のスタイルを指定します。

書式

border-left-style: style

属性

style
線のスタイルを指定します。指定形式はスタイルシート属性 borderstyle 属性値と同じです。

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
枠線の色を指定します。