CSS border-right property

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

Figure 1. border, margin and padding

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

書式

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

関連記事

参考文献

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

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