境界線に関するスタイルシート属性

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

border

属性borderは、境界線の太さ、種類、色を指定するCSSプロパティである。枠線とは margin と padding の境界線のことです。

書式

border: width style color;

属性

width
境界線の太さを 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。
太さ
説明
thin 細い線
medium 通常の線(規定値)
thick 太い線

次の単位を指定できる。

単位
単位 名前 説明
cm centimeters 1cm
mm millimeters 1mm
Q 級 (quarter-millimeters) 0.25mm
in inches 1 inch
pc picas 1/6 inch
pt points 1/72 inch
px pixels 1/96 inch
style
境界線の種類を以下の値の中から指定します。種類の違いは線の幅をある程度太くしないと見分けがつきません。
種類
説明
none 線無し(規定値)
solid 実線
dashed 粗い点線
dotted 点線
double 2重線
groove 谷線
ridge 山線
inset 内線
outset 外線
inherit 継承
color
境界線のを指定する。

太さ

<p style="border: thin solid black;">thin</p>

thin

<p style="border: medium solid black;">thin</p>

medium

<p style="border: thick solid black;">thin</p>

thick

<p style="border: 1px solid black;">1px</p>

1px

<p style="border: 2px solid black;">2px</p>

2px

<p style="border: 4px solid black;">4px</p>

4px

種類

<p style="border: 1px solid black;">solid</p>

solid

<p style="border: 1px dashed black;">dashed</p>

dashed

<p style="border: 1px dotted black;">dotted</p>

dotted

<p style="border: thick double black;">double</p>

double

<p style="border: thick groove silver;">groove</p>

groove

<p style="border: thick ridge silver;">ridge</p>

ridge

<p style="border: thick inset silver;">inset</p>

inset

<p style="border: thick outset silver;">outset</p>

outset

<p style="border: 1px solid black;">black</p>

black

<p style="border: 1px solid gray;">gray</p>

gray

<p style="border: 1px solid silver;">silver</p>

silver

<p style="border: 1px solid maroon;">maroon</p>

maroon

<p style="border: 1px solid red;">red</p>

red

<p style="border: 1px solid purple;">purple</p>

purple

<p style="border: 1px solid fuchsia;">fuchsia</p>

fuchsia

<p style="border: 1px solid green;">green</p>

green

<p style="border: 1px solid lime;">lime</p>

lime

<p style="border: 1px solid olive;">olive</p>

olive

<p style="border: 1px solid yellow;">yellow</p>

yellow

<p style="border: 1px solid navy;">navy</p>

navy

<p style="border: 1px solid blue;">blue</p>

blue

<p style="border: 1px solid teal;">teal</p>

teal

<p style="border: 1px solid cyan;">cyan</p>

cyan

border-top

border-top は、上の境界線の太さ、種類、色を指定するCSSプロパティである。枠線とは marginpadding の境界線のことです。

書式

border-top: width style color;

属性

width
上の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
上の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
color
上の境界線のを指定する。

太さ

<p style="border-top: thin solid black;">thin</p>

thin

<p style="border-top: medium solid black;">thin</p>

medium

<p style="border-top: thick solid black;">thin</p>

thick

<p style="border-top: 1px solid black;">1px</p>

1px

<p style="border-top: 2px solid black;">2px</p>

2px

<p style="border-top: 4px solid black;">4px</p>

4px

border-right

border-right は、右の境界線の太さ、種類、色を指定するCSSプロパティである。枠線とは 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 は、下の境界線の太さ、種類、色を指定するCSSプロパティである。枠線とは 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 は、左の枠線の太さ、種類、色を指定するCSSプロパティである。枠線とは marginpadding の境界線のことです。

書式

border-left: width style color;

属性

width
左の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。
style
左の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
color
左の境界線の色を指定する。

種類

<p style="border-left: 1px solid black;">solid</p>

solid

<p style="border-left: 1px dashed black;">dashed</p>

dashed

<p style="border-left: 1px dotted black;">dotted</p>

dotted

<p style="border-left: thick double black;">double</p>

double

<p style="border-left: thick groove silver;">groove</p>

groove

<p style="border-left: thick ridge silver;">ridge</p>

ridge

<p style="border-left: thick inset silver;">inset</p>

inset

<p style="border-left: thick outset silver;">outset</p>

outset

border-width

border-width は、境界線の太さを指定するCSSプロパティである。

書式

border-width: top right bottom left

属性

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

border-top-width

border-top-width は、上の境界線の太さを指定するCSSプロパティである。

書式

border-top-width: width

属性

width
上の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-right-width

border-right-width は、右の境界線の太さを指定するCSSプロパティである。

書式

border-right-width: width

属性

width
右の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-bottom-width

border-bottom-width は、下の境界線の太さを指定するCSSプロパティである。

書式

border-bottom-width: width

属性

width
下の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-left-width

border-left-width は、左の境界線の太さを指定するCSSプロパティである。

書式

border-left-width: width

属性

width
左の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

border-style

border-style は境界線の種類を指定するCSSプロパティである。

書式

border-style: top right bottom left

属性

top
上の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
right
右の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
bottom
下の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
left
左の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
<div style="border-style: solid dashed dotted double; padding: 1rem;">
  example
</div>
example

border-top-style

border-top-style は、上の境界線の種類を指定するCSSプロパティである。

書式

border-top-style: style

属性

style
上の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
<div style="border-style: solid; border-top-style: dotted; padding: 1rem;">
  example
</div>
example

border-right-style

border-right-style は右の境界線の種類を指定するCSSプロパティである。

書式

border-right-style: style

属性

style
右の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
<div style="border-style: solid; border-right-style: dotted; padding: 1rem;">
  example
</div>
example

border-bottom-style

border-bottom-style は下の境界線の種類を指定するCSSプロパティである。

書式

border-bottom-style: style

属性

style
下の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
<div style="border-style: solid; border-bottom-style: dotted; padding: 1rem;">
  example
</div>
example

border-left-style

border-left-style は左の境界線の種類を指定するCSSプロパティである。

書式

border-left-style: style

属性

style
左の境界線の種類を指定する。指定形式はスタイルシート属性 borderstyle 属性値と同じです。
<div style="border-style: solid; border-left-style: dotted; padding: 1rem;">
  example
</div>
example

border-color

border-color は境界線の色を指定するCSSプロパティである。

書式

border-color: top right bottomleft

属性

top
上の境界線の色を指定する。
right
右の境界線の色を指定する。
bottom
下の境界線の色を指定する。
left
左の境界線の色を指定する。

border-colorの使用例と表示サンプル

<div style="border-style: solid; border-color: red green blue yello; padding: 1rem;">
  example
</div>
example

border-top-color

border-color は、上の境界線の色を指定するCSSプロパティである。

書式

border-top-color: color

属性

color
上の境界線の色を指定する。
<div style="border-style: solid; border-top-color: lime; padding: 1rem;">
  example
</div>
example

border-right-color

border-right-color は、右の境界線の色を指定するCSSプロパティである。

書式

border-right-color: color

属性

color
右の境界線の色を指定する。
<div style="border-style: solid; border-right-color: lime; padding: 1rem;">
  example
</div>
example

border-bottom-color

border-bottom-color は、下の境界線の色を指定するCSSプロパティである。

書式

border-bottom-color: color

属性

color
下の境界線の色を指定する。
<div style="border-style: solid; border-bottom-color: lime; padding: 1rem;">
  example
</div>
example

border-left-color

border-left-color は、左の境界線の色を指定するCSSプロパティである。

書式

border-left-color: color

属性

color
左の境界線の色を指定する。
<div style="border-style: solid; border-left-color: lime; padding: 1rem;">
  example
</div>
example

参考文献

W3C (2021) CSS Backgrounds and Borders Module Level 3

W3C (2019) CSS Values and Units Module Level 3