CSS border

CSSのborderプロパティに境界線の太さ、線種および色を指定することで、HTML要素の境界線を表示させることができます。

border

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

書式

border: width style color;

属性

width

境界線の太さを 1px のように数値と単位を組み合わせて指定するか、以下の値の中から選びます。

太さ

値	説明
thin	細い線
medium	通常の線（規定値）
thick	太い線

次の単位を指定できる。

単位

単位	名前	説明
em		フォントサイズ
rem	root em	ドキュメントのルート要素のフォントサイズ
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
%	percent	パーセント

<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

style

境界線の種類を以下の値の中から指定します。種類の違いは線の幅をある程度太くしないと見分けがつきません。

種類

値	説明
none	線無し（規定値）
solid	実線
dashed	粗い点線
dotted	点線
double	２重線
groove	谷線
ridge	山線
inset	内線
outset	外線
inherit	継承

<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

color

境界線の色を指定する。

<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-width

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

書式

境界線の太さを指定する。

border-width: all

border-width: topbottom rightleft

border-width: top right bottom left

all

境界線の太さ

<p style="border-width: thick; border-style: solid; padding: 1rem">thick</p>

thick

topbottom

上と下の境界線の太さ

<p style="border-width: thin thick; border-style: solid; padding: 1rem">thin thick</p>

thin thick

rightleft

右と左の境界線の太さ

<p style="border-width: thick thin; border-style: solid; padding: 1rem">thick thin</p>

thick thin

top

上の境界線の太さ

<p style="border-width: thick thin thin thin; border-style: solid; padding: 1rem">thick thin thin thin</p>

thick thin thin thin

right

右の境界線の太さ

<p style="border-width: thin thick thin thin; border-style: solid; padding: 1rem">thin thick thin thin</p>

thin thick thin thin

bottom

下の境界線の太さ

<p style="border-width: thin thin thick thin; border-style: solid; padding: 1rem">thin thin thick thin</p>

thin thin thick thin

left

左の境界線の太さ

<p style="border-width: thin thin thin thick; border-style: solid; padding: 1rem">thin thin thin thick</p>

thin thin thin thick

border-style

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

書式

境界線のスタイルを指定する。

border-style: all

border-style: topbottom rightleft

border-style: top right bottom left

all

境界線の種類

<div style="border-style: solid; padding: 1rem">solid</div>

solid

topbottom

上と下の境界線の種類

<div style="border-style: solid dotted; padding: 1rem">solid dotted</div>

solid dotted

rightleft

右と左の境界線の種類

<div style="border-style: dotted solid; padding: 1rem">dotted solid</div>

dotted solid

top

上の境界線の種類

<div style="border-style: solid dotted dotted dotted; padding: 1rem">solid dotted dotted dotted</div>

solid dotted dotted dotted

right

右の境界線の種類

<div style="border-style: dotted solid dotted dotted; padding: 1rem">dotted solid dotted dotted</div>

dotted solid dotted dotted

bottom

下の境界線の種類

<div style="border-style: dotted dotted solid dotted; padding: 1rem">dotted dotted solid dotted</div>

dotted dotted solid dotted

left

左の境界線の種類

<div style="border-style: dotted dotted dotted solid; padding: 1rem">dotted dotted dotted solid</div>

dotted dotted dotted solid

border-color

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

書式

すべての境界線の色を指定する。

border-color: all

border-color: topbottom rightleft

border-color: top right bottom left

all

境界線の色

<p style="border-color: red; border-style: solid; padding: 1rem">red</p>

red

topbottom

上と下の境界線の色

<p style=" border-color: red gray; border-style: solid;padding: 1rem">red gray</p>

red gray

rightleft

右と左の境界線の色

<p style=" border-color: gray red; border-style: solid;padding: 1rem">gray red</p>

gray red

top

上の境界線の色

<p style="border-color: red gray gray gray; border-style: solid; padding: 1rem">red gray gray gray</p>

red gray gray gray

right

右の境界線の色

<p style="border-color: gray red gray gray; border-style: solid; padding: 1rem">gray red gray gray</p>

gray red gray gray

bottom

下の境界線の色

<p style="border-color: gray gray red gray; border-style: solid; padding: 1rem">gray gray red gray</p>

gray gray red gray

left

左の境界線の色

<p style="border-color: gray gray gray red; border-style: solid; padding: 1rem">gray gray gray red;</p>

gray gray gray red

border-radius

境界線の角を丸くする。

構文

border-radius: radius

border-radius: tlbr trbl

border-radius: to tr br bl

radius

四隅の半径を指定する。

<p style="border: thin solid black; border-radius: 2px">2px</p>
<p style="border: thin solid black; border-radius: 4px">4px</p>
<p style="border: thin solid black; border-radius: 8px">8px</p>

2px

4px

8px

tlbr

左上と右下の半径を指定する。

<p style="border: thin solid black; border-radius: 2px 8px">2px 8px</p>

2px 8px

trbl

右上と左下の半径を指定する。

tl

左上の半径を指定する。

<p style="border: thin solid black; border-radius: 2px 4px 8px 16px">2px 4px 8px 16px</p>

2px 4px 8px 16px

tr

右上の半径を指定する。

br

右下の半径を指定する。

bl

左下の半径を指定する。

関連記事

border-bottom

要素の下側にある境界線に対して太さ、線種および色を指定する。

border-left

要素の左側にある境界線に対して太さ、線種および色を指定する。

border-right

要素の右側にある境界線に対して太さ、線種および色を指定する。

border-top

要素の上側にある境界線に対して太さ、線種および色を指定する。

display

要素の表示方法を指定する。

<div style="display: inline-block; border: 1px solid gray">example<div>

example

<div style="display: block; border: 1px solid gray">example<div>

example

参考文献

World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3

World Wide Web Consortium (2019) CSS Values and Units Module Level 3