border-right-colorとは?基本的な使い方と値を指定する方法

要素の右側のボーダーの色を指定するborder-right-color

意味や役割はなんとなくわかるけど、正しい使い方を知らない人もいるでしょう。

・border-right-colorってどんなプロパティ?
・具体的な使い方を知りたい・・・。
・border-rightとの違いは?

こんな疑問を持っていませんか?

今回は、border-right-colorの

・基本的な使い方
・border-rightとの違い
・border-right-colorで値を指定する様々な方法

について説明します。

border-right-colorとは

border-right-colorとはどういったプロパティなのか、詳しく知らない人も多いでしょう。

なのでここでは、border-right-colorの意味や役割について解説していきます。

border-right-colorの読み方

border-right-colorは「ボーダー・ライト・カラー」と読みます。

「border」は「枠線・ボーダー」、「right」は「右」、「color」は「色」という意味があります。

CSSでは、この「border-right-color」を右側のボーダーの色という意味で使われています。

例えば、要素の右側のボーダーの色だけを指定したいときに、使われることが多いです。

border-right-colorは右側のボーダーの色を指定するプロパティ

border-right-colorは右側のボーダーの色を指定するプロパティです。

border-right-colorを指定すると、右側のボーダーの色を設定することができます。

色を指定するときは、色の名前や#FFFFFF、rgb(r,g,b)などの指定が可能です。

border-right-colorで利用できる値

border-right-colorでは以下の値を使うことができます。

説明
color 右の境界線の色を定義します。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox 完全対応
Internet Explorer 完全対応
Opera 完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome 完全対応
Android版Firefox 完全対応
Android 版 Opera 完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

border-right-colorの基本的な使い方

border-right-colorの意味や役割についてわかりました。

なのでここでは、実際にborder-right-colorの使い方を解説していきます。

まだ使い方を知らない人は、しっかりと理解していきましょう。

border-right-colorの使い方

border-right-colorを指定するときは、border-right-color: 〇〇;と記述します。(〇〇には、色名や#FFFFFF、rgb(r,g,b)などが入ります。)

実際の使い方をコードを用いて見ていきましょう。

※border-right-colorを指定するときは、borderとセットで使います。
また、ボーダーが文字の真横に来るように「display: inline-block;」を指定しています。

今回は例として、pタグを用意し「border: solid;」と指定します。

そして、そのpタグに「border-right-color: lightblue;」と指定してみましょう。

すると、結果は次のようになります。

pタグの右側のボーダーの色だけが、水色になっていますね。

このように、border-right-colorを指定すれば、ボーダーの右側の色だけを変更することができます。

なので、使い方を覚えておくといいでしょう。

border-right-colorとborder-rightの違い

border-right-colorと似たプロパティで、border-rightというものがあります。

border-rightは、右側のボーダーのスタイル・太さ・色をまとめて指定するプロパティです。

ここでは、border-right-colorとborder-rightにどのような違いがあるのか、詳しく解説していきます。

border-rightの実際の使い方をコードで見ていきましょう。

※ボーダーが文字の真横に来るように、「display: inline-block;」と指定しています。

例として、pタグを用意します。

そして、そのpタグに「border-right: solid 10px lightblue;」と指定してみましょう。

すると、結果は次のようになります。

今回は、「solid 10px lightblue」と指定したので、スタイルは1本線、太さは10px、色は水色のボーダーになっていますね。

このように、border-rightを指定すると、右側のボーダーのスタイル・太さ・色をまとめて設定することができます。

右側のボーダーの色だけを指定したいときはborder-right-color、右側のボーダーのスタイル・太さ・色をまとめて指定したいときはborder-rightというように使い分けるといいでしょう。

border-right-colorで値を指定する様々な方法

ここまでで、border-right-colorの基本的な使い方がわかりました。

なのでここからは、border-right-colorで値を指定する様々な方法を解説していきます。

border-right-colorで指定できる値は、色の名前#FFFFFFrgb(r,g,b)などです。

実際の使い方をコードで見ていきましょう。

例として、pタグをいくつか用意し「border: solid;」と指定します。

そして、それぞれのpタグにクラス名をつけて「border-right-color」を指定してみましょう。

今回は色を、「lightblue」「#ff5533」「rgb(0, 100, 250)」としました。

結果を表示すると、次のようになります。

それぞれのpタグで右側のボーダーの色が違いますね。

このように、border-right-colorは自分の好きな色を指定することができます。

なので、使い方を覚えておくといいでしょう。

まとめ

今回は、border-right-colorの意味や使い方について解説しました。

border-right-colorは、要素の右側のボーダーの色を指定するプロパティです。

上下左右ある中の、右側のボーダーの色だけを指定したいときに役立ちます。

なので、使い方を覚えておくといいでしょう。

この記事がborder-right-colorの学習に役立つと幸いです。

参考文献:MDN web docs|border-right-color – CSS:カスケーディングスタイルシート