CSS border

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

border
Figure 1. border, margin and padding

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 2重線
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