CSS border-bottom

border-bottom CSSプロパティを使うと、HTML要素の下側の境界線について、その太さ、スタイルおよび色を指定することができます。

border-bottom

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

書式

border-bottom: width style color

width、style 及び color の順序は任意である。

属性

width

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

境界線の太さは、次に示す名前で指定できる。

太さ
値	説明
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-bottom: solid black thin">solid black thin</p>
<p style="border-bottom: solid black medium">solid black medium</p>
<p style="border-bottom: solid black thick">solid black thick</p>

solid black thin

solid black medium

solid black thick

style

境界線の種類を次に示す値の中から指定する。

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

<p style="border-bottom: medium black solid">medium black solid</p>
<p style="border-bottom: medium black dashed">medium black dashed</p>
<p style="border-bottom: medium black dotted">medium black dotted</p>
<p style="border-bottom: medium black double">medium black double</p>

medium black solid

medium black dashed

medium black dotted

medium black double

color

下の境界線の色を指定する。

<p style="border-bottom: medium solid black">medium solid black</p>
<p style="border-bottom: medium solid gray">medium solid gray</p>
<p style="border-bottom: medium solid silver">medium solid silver</p>
<p style="border-bottom: medium solid white">medium solid white</p>
<p style="border-bottom: medium solid red">medium solid red</p>
<p style="border-bottom: medium solid green">medium solid green</p>
<p style="border-bottom: medium solid blue">medium solid blue</p>

medium solid black

medium solid gray

medium solid silver

medium solid white

medium solid red

medium solid green

medium solid blue

JavaScript

JavaScript からはエレメント・オブジェクトの style.borderBottom プロパティで CSS の border-bottom プロパティを参照及び設定できる。

document.getElementById('example').style.borderBottom = 'thin solid black'

border-bottom-width

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

書式

border-bottom-width: width

属性

width

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

下の境界線の太さを指定する例を以下に示す。

<p style="border-bottom-style: solid; border-bottom-width: thin">thin</p>
<p style="border-bottom-style: solid; border-bottom-width: medinum">medinum</p>
<p style="border-bottom-style: solid; border-bottom-width: thick">thick</p>

thin

medinum

thick

JavaScript

JavaScript からはエレメント・オブジェクトの style.borderBottomWidth プロパティで CSS の border-bottom-width プロパティを参照及び設定できる。

document.getElementById('example').style.borderBottomWidth = "thin";

border-bottom-style

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

書式

border-bottom-style: style

属性

style

下の境界線の種類を指定する。指定できる値を以下に示す。

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

下の境界線の種類を指定する例を以下に示す。

<p style="border-bottom-style: none">none</p>
<p style="border-bottom-style: solid">solid</p>
<p style="border-bottom-style: dashed">dashed</p>
<p style="border-bottom-style: dotted">dotted</p>
<p style="border-bottom-style: double">double</p>

none

solid

dashed

dotted

double

JavaScript

JavaScript からはエレメント・オブジェクトの style.borderBottomStyle プロパティで CSS の border-bottom-style プロパティを参照及び設定できる。

document.getElementById('example').style.borderBottomStyle = "solid";

border-bottom-color

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

書式

border-bottom-color: color

属性

color

下の境界線の色を指定する。

下の境界線の太さを指定する例を以下に示す。

<p style="border-bottom-style: solid; border-bottom-color: black">black</p>
<p style="border-bottom-style: solid; border-bottom-color: gray">gray</p>
<p style="border-bottom-style: solid; border-bottom-color: silver">silver</p>
<p style="border-bottom-style: solid; border-bottom-color: white">white</p>
<p style="border-bottom-style: solid; border-bottom-color: red">red</p>
<p style="border-bottom-style: solid; border-bottom-color: green">green</p>
<p style="border-bottom-style: solid; border-bottom-color: blue">blue</p>

black

gray

silver

white

red

green

blue

JavaScript

JavaScript からはエレメント・オブジェクトの style.borderBottomColor プロパティで CSS の border-bottom-color プロパティを参照及び設定できる。

document.getElementById('example').style.borderBottomColor = "black";

border-bottom-left-radius

左下隅の境界線の角を丸くする。

構文

border-bottom-left-radius: radius

border-bottom-left-radius: horizontal vertical

radius

半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 40px; height: 100px;">
</div>

半径を相対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 50%; height: 100px; width: 100px">
</div>

horizontal

水平方向の半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 40px 20px; height: 100px;">
</div>

半径を相対値（幅の50%、高さの25%）で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 50% 25%; height: 100px; width: 100px">
</div>

vertical

垂直方向の半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 20px 40px; height: 100px;">
</div>

半径を相対値（幅の25%、高さの50%）で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-left-radius: 25% 50%; height: 100px; width: 100px">
</div>

border-bottom-right-radius

右下隅の境界線の角を丸くする。

構文

border-bottom-right-radius: radius

border-bottom-right-radius: horizontal vertical

radius

半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 40px; height: 100px;">
</div>

半径を相対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 50%; height: 100px; width: 100px">
</div>

horizontal

水平方向の半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 40px 20px; height: 100px;">
</div>

半径を相対値（幅の50%、高さの25%）で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 50% 25%; height: 100px; width: 100px">
</div>

vertical

垂直方向の半径

半径を絶対値で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 20px 40px; height: 100px;">
</div>

半径を相対値（幅の25%、高さの50%）で指定する例を次に示す。

<div style="border: thin solid black; order-bottom-right-radius: 25% 50%; height: 100px; width: 100px">
</div>

参考文献

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

CSS border-bottom

目次

border-bottom

書式

属性

JavaScript

border-bottom-width

書式

属性

JavaScript

border-bottom-style

書式

属性

JavaScript

border-bottom-color

書式

属性

JavaScript

border-bottom-left-radius

構文

border-bottom-right-radius

構文

関連記事

参考文献