CSS border-right

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

• border-right
• border-right-width
• border-right-style
• border-right-color

border-right

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

書式

border-right: width style color;

属性

width

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

境界線の幅は、あらかじめ定義されている名前で指定することができる。

太さ

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

境界線の幅は、数値と単位を組み合わせて指定することもできる。

単位

単位	名前	説明
em	emphemeral unit	フォントサイズ
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-right: thin solid black">thin solid black</p>
<p style="border-right: medium solid black">medium solid black</p>
<p style="border-right: thick solid black">thick solid black</p>

thin solid black

medium solid black

thick solid black

style

右の境界線の種類を指定する。

種類

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

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

medium solid black

medium dashed black

medium dotted black

color

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

<p style="border-right: medium solid black">medium solid black</p>
<p style="border-right: medium solid gray">medium solid gray</p>
<p style="border-right: medium solid silver">medium solid silver</p>

medium solid black

medium solid gray

medium solid silver

JavaScript

CSS の border-right プロパティを JavaScript から参照及び設定するには、エレメントオブジェクトの style.borderRight プロパティを使う。

<p id="example">example</p>
<script>
  document.getElementById('example').style.borderRight = 'thin dashed red'
</script>

border-right-width

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

書式

border-right-width: width

属性

width

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

境界線の幅は、あらかじめ定義されている名前で指定することができる。

太さ

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

境界線の幅は、数値と単位を組み合わせて指定することもできる。

単位

単位	名前	説明
em	emphemeral unit	フォントサイズ
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-right-width: thin; border-right-style: solid">thin</p>
<p style="border-right-width: medium; border-right-style: solid">medium</p>
<p style="border-right-width: thick; border-right-style: solid">thick</p>

thin

medium

thick

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

1rem

<p style="border-right-width: 1px; border-right-style: solid">1px</p>
<p style="border-right-width: 2px; border-right-style: solid">2px</p>

1px

2px

JavaScript

CSS の border-right-width プロパティを JavaScript から参照及び設定するには、エレメントオブジェクトの style.borderRightWidth プロパティを使う。

<p id="example">example</p>
<script>
  document.getElementById('example').style.borderRightWidth = 'thin'
</script>

border-right-style

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

書式

border-right-style: style

属性

style

右の境界線の種類を指定する

種類

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

<p style="border-right-width: medium; border-right-style: solid">solid</p>
<p style="border-right-width: medium; border-right-style: dashed">dashed</p>
<p style="border-right-width: medium; border-right-style: dotted">dotted</p>
<p style="border-right-width: medium; border-right-style: double">double</p>

solid

dashed

dotted

double

JavaScript

CSS の border-right-style プロパティを JavaScript から参照及び設定するには、エレメントオブジェクトの style.borderRightStyle プロパティを使う。

<p id="example">example</p>
<script>
  document.getElementById('example').style.borderRightStyle = 'dashed'
</script>

border-right-color

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

書式

border-right-color: color

属性

color

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

サンプル

<p style="border-right-style: solid; border-right-color: red">red</p>
<p style="border-right-style: solid; border-right-color: green">green</p>
<p style="border-right-style: solid; border-right-color: blue">blue</p>

red

green

blue

JavaScript

CSS の border-right-color プロパティを JavaScript から参照及び設定するには、エレメントオブジェクトの style.borderRightColor プロパティを使う。

<p id="example">example</p>
<script>
  document.getElementById('example').style.borderRightColor = 'red'
</script>

関連記事

• border
• border-top
• border-bottom
• border-left
• color
• Bootstrap border-end class
• Primer CSS border-right class
• Tachyons br class
• Tailwind CSS border-r class

参考文献

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

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