border-right

CSSでは、ボックス右に枠線を表示して、色や太さを指定することができます。

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

border-rightプロパティとは

border-rightプロパティを使うと、ボックス右側の枠線(境界線)を表示して、色や太さを指定することができます。

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

border-rightは、border-right-widthと、border-right-styleborder-right-colorを一括して設定できます。

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

【border-rightの定義】
line-width || line-style || CSSで指定できる色
初期値 medium none colorプロパティの値
適用対象 すべての要素
継承 しない

値の説明

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

line-width
境界線の太さです。使える値は、border-right-widthと同じです。
line-style
境界線の種類です。使える値は、border-right-styleと同じです。
CSSで指定できる色
境界線の色です。使える値は、border-right-colorと同じです。

これらの値は、3つとも必須という訳ではなく、1つや2つだけ指定することも可能です。指定する順序も決まっていません。

省略した値は、初期値が使われます。

利用例

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

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

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

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

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

以下は、2つだけ指定した例です。

【border-rightで2つだけ指定した例】
.test {
  border-right: dotted red;
}

上記であれば、境界線はデフォルトのmedium(普通は3px)の太さで、点線の赤色で表示されます。

ブラウザのサポート状況

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

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

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

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