border-right-width

CSSでは、ボックス右の枠線で太さを変えることができます。

本ページでは、border-right-widthプロパティについて説明します。

border-right-widthプロパティとは

border-right-widthプロパティを使うと、ボックス右側の枠線(境界線)で太さを変えることができます。

四角い箱の右に赤い線があり、その上にborder-right-widthと表示されています。

border-right-widthの定義は、以下のとおりです。

【border-right-widthの定義】
length | thin | medium | thick
初期値 medium
適用対象 すべての要素
継承 しない

値の説明

以下は、border-right-widthで使える値と説明です。

length
数値と単位で指定します。マイナスは使えません。
thin
細い境界線です。
hidden
中太の境界線です。
thick
太い境界線です。

thin、medium、thichの太さは明確に決められていませんが、フォントサイズのmediumが17px以下の場合は、指標として以下が示されています。

【指標値】
キーワード 指標値
thin 1px
medium 3px
thick 5px

デフォルトがmediumのため、border-right-widthを指定しない時は3pxになることが多いと思います。

利用例

border-right-widthの利用例は、以下のとおりです。

【border-right-widthの利用例】
.test {
  border-right-style: solid;
  border-right-width: 2px;
}

border-right-widthだけでは、境界線は表示されません。上記のように、border-right-styleなどで境界線を表示する指定が必要です。

上記は、以下のように表示されます。

「テストです。」と表示された右に、境界線が2pxの太さで表示されています。

段落の右側に、境界線が2pxの太さで表示されています。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
border-right-width
【スマートフォン】
項目 Sa An Op Ch Fx Sm
border-right-width
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る