CSS border-bottom property

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

Figure 1. border, margin and padding

border-bottom

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

書式

border-bottom: 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 パーセント
style
境界線の種類を次に示す値の中から指定する。
種類
説明
none 線無し(規定値)
solid 実線
dashed 粗い点線
dotted 点線
double 2重線
groove 谷線
ridge 山線
inset 内線
outset 外線
inherit 継承
color
下の境界線の色を指定する。

使用例と表示サンプル

要素の下側の境界線を設定する例を次に示す。

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

thin solid black

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

medium solid black

<p style="border-bottom: thick solid black">
  thick solid black
</p>

thick solid black

<p style="border-bottom: thin solid gray">
  thin solid gray
</p>

medium solid gray

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

medium dashed black

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

medium dotted black

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

medium double black

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

medium solid gray

<p style="border-bottom: medium dotted gray">
  medium solid gray
</p>

medium solid silver

<p style="border-bottom: medium solid red">
  medium solid red
</p>

medium solid red

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
下の境界線の太さを指定する。指定形式はスタイルシート属性 borderwidth 属性値と同じです。

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

関連記事

参考文献

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

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