border-right-width：要素の右辺に設定した境界線の幅を指定する

X
f
LINE
B!
p

初期値	`medium`
適用対象	全ての要素、`::first-letter`
継承	しない
アニメーション	<length>値
対応ブラウザ	caniuseで確認

border-right-widthプロパティの説明

border-right-widthは、要素の右辺に設定した境界線（外枠、枠線）の幅、つまり太さを指定します。ボーダーの太さを指定する場合、先にborder-styleを指定しておかなければなりません。形状を省略すると初期値であるnoneが選ばれて境界線そのものが表示されません。

上下左右すべての境界線の幅を一括で指定する場合はborder-widthを、それ以外の値も含めて一括で指定する場合はショートハンド・プロパティのborderを使用して下さい。

ほかの辺に表示される境界線の幅を指定する場合は、以下のいずれかのプロパティを使用します。

border-top-width：上辺の境界線の幅を指定する
border-right-width：右辺の境界線の幅を指定する
border-bottom-width：下辺の境界線の幅を指定する
border-left-width：左辺の境界線の幅を指定する

border-right-widthに指定できる値

<line-width>: 境界線の幅を指定するキーワードあるいはデータ型の指定値です。使用できるものは以下になります。
thin: 境界線を細い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
medium: 境界線を中太の線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
thick: 境界線を太い線で表します。どれくらいの幅になるかはブラウザの実装に依存します。
<length>: CSSで使用できる単位つきの数値で指定します。ピクセル値、フォントサイズ、ビューポートに対する割合などから選べます。

border-right-widthの使い方とサンプル

border-right-widthプロパティの構文は以下の通りです。

CSS

/* キーワード値 */
border-right-width: thin;
border-right-width: medium;
border-right-width: thick;

/* <length>値 */
border-right-width: 1px;
border-right-width: 0.5em;
border-right-width: 3pt;
border-right-width: 6vmax;

/* グローバル値 */
border-right-width: inherit;
border-right-width: initial;
border-right-width: revert;
border-right-width: unset;

border-right-widthの実例

それでは簡単な例を見てみましょう。ここでは、要素の右辺だけに境界線を表示し、太さだけを変えた場合の挙動を確かめます。

表示確認

CSS

.samp_box {
	padding: 0 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	background-color: #eee;
	border-right-style: solid;
}
#border_1 {
	border-right-width: thin;
}
#border_2 {
	border-right-width: medium;
}
#border_3 {
	border-right-width: thick;
}
#border_4 {
	border-right-width: 1px;
}
#border_5 {
	border-right-width: 5px;
}
#border_6 {
	border-right-width: 10px;
}

HTML

<section class="samp_box">
	<p>border-right-width</p>
	<div id="border_1">thin</div>
	<div id="border_2">medium</div>
	<div id="border_3">thick</div>
	<div id="border_4">1px</div>
	<div id="border_5">5px</div>
	<div id="border_6">10px</div>
</section>