border-right

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

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

border-rightプロパティとは

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

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

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

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

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

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

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

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

【border-rightの利用例】

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

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

段落の左に、境界線が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	〇	〇	〇	〇	〇	〇

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