border-right-width

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

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

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

値の説明

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

length

数値と単位で指定します。マイナスは使えません。

thin

細い境界線です。

hidden

中太の境界線です。

thick

太い境界線です。

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

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

利用例

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

.test {
  border-right-style: solid;
  border-right-width: 2px;
}

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

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

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

ブラウザのサポート状況

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

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

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