【border-right-color】右のボーダー(枠線)の色を指定

border-right-colorプロパティでは、右のボーダー(枠線)の色を個別に指定することができます。 ボーダーの色を上下左右まとめて指定したい場合は、border-colorプロパティを使用して下さい。

ボーダーの色を指定しない場合は、colorプロパティの色が反映されます。

なおボーダーは種類の初期値が「none」のため、border-right-colorのみを指定しただけではボーダー(枠線)は表示されません。 border-right-colorプロパティを使用する場合は、併せてボーダーの種類(border-style)を設定し、値を「none」「hidden」以外に指定して下さい。

書式

  • border-right-color : ……… 右のボーダー(枠線)の色のみを指定

★:色、transparent、inherit

RGB値、または「red」などのカラーネームで色を指定します。色についてはカラーコード一覧を参照下さい。
transparent
ボーダーの幅をそのまま確保し、色を透明にします。

使用した時の例

div{border-style:solid;}
 
.sample1 {border-right-color: #F48282;}
.sample2 {border-right-color: blue;}
.sample3 {border-right-color: transparent;}
<div>border-right-colorを指定しない場合</div>
<div class="sample1">右のボーダーの色を#F48282に指定。</div>
<div class="sample2">右のボーダーの色をblueに指定。</div>
<div class="sample3">右のボーダーをtransparentに指定。</div>

ブラウザ上の表示例

border-right-colorを指定しない場合
右のボーダーの色を#F48282に指定。
右のボーダーの色をblueに指定。
右のボーダーをtransparentに指定。

対応ブラウザなどのデータ

初期値 colorプロパティの値 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報