ウェブランサー

border-right - 要素の右辺に表示するボーダー(枠線)の各値を設定する

取り扱い 標準
適用可能 全ての要素
継承 しない
対応ブラウザ border-rightの対応状況を確認する

border-rightプロパティの説明

border-rightは、要素の右辺に表示するボーダー(枠線)の太さ、スタイル、色を指定する際に使用します。指定する値は任意の順序でスペースで区切って記述します。上下左右のボーダー色をまとめて指定する場合には、borderを使います。

類似のプロパティには、border-topborder-bottomborder-leftがあります。必要に応じて使い分けてください。

border-rightに与えられる値

ボーダーの太さ、スタイル、色に指定できる値は、それぞれのプロパティを参照してください。
border-width
border-style
border-color

border-rightの使用サンプル

CSS
.box_sample {
 padding: 5px;
 margin: 0 0 10px 0;
}
.border_1 {
 border-top: 3px solid red;
 border-right: 3px solid blue;
 border-bottom: 3px solid green;
 border-left: 3px solid purple;
}
.border_2 {
 border-top: 3px dashed #FF0000;
 border-right: 3px dashed #000FF;
 border-bottom: 3px dashed #00CC33;
 border-left: 3px dashed #800080;
}
.border_3 {
 border-top: 3px dotted rgb(255,0,0);
 border-right: 3px dotted rgb(0,0,255);
 border-bottom: 3px dotted rgb(0,204,51);
 border-left: 3px dotted rgb(128,0,128);
}
HTML
<div class="box_sample border_1">
border-top: 3px solid red;
border-right: 3px solid blue;
border-bottom: 3px solid green;
border-left: 3px solid purple;
</div>

<div class="box_sample border_2">
border-top: 3px dashed #FF0000;
border-right: 3px dashed #000FF;
border-bottom: 3px dashed #00CC33;
border-left: 3px dashed #800080;
</div>

<div class="box_sample border_3">
border-top: 3px dotted rgb(255,0,0);
border-right: 3px dotted rgb(0,0,255);
border-bottom: 3px dotted rgb(0,204,51);
border-left: 3px dotted rgb(128,0,128);
</div>
表示確認
border-top: 3px solid red;
border-right: 3px solid blue;
border-bottom: 3px solid green;
border-left: 3px solid purple;
border-top: 3px dashed #FF0000;
border-right: 3px dashed #0000FF;
border-bottom: 3px dashed #00CC33;
border-left: 3px dashed #800080;
border-top: 3px dotted rgb(255,0,0);
border-right: 3px dotted rgb(0,0,255);
border-bottom: 3px dotted rgb(0,204,51);
border-left: 3px dotted rgb(128,0,128);

border-rightに関連するCSSプロパティ

外枠(ボーダー・アウトライン)
border 要素の周囲にボーダー(枠線)を付ける
border-bottom 要素の底辺にボーダー(枠線)を付ける
border-bottom-color 要素の底辺に設定したボーダー(枠線)の色を指定する
border-bottom-left-radius 要素の左下の角丸を指定する
border-bottom-right-radius 要素の右下の角丸を指定する
border-bottom-style 要素の底辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-bottom-width 要素の底辺に設定したボーダー(枠線)の太さを指定する
border-break ボックスが分割された場合のボーダーの表示方法を指定する
border-collapse テーブルセルのボーダーの表示の仕方を指定する
border-color 要素のボーダー(枠線)の色を指定する
border-image 要素のボーダー(枠線)に画像を指定する
border-image-outset ボーダーイメージエリアを広げる
border-image-repeat ボーダー(枠線)に指定された画像の繰り返し方法を指定する
border-image-slice ボーダー(枠線)に指定された画像の使用範囲を指定する
border-image-source ボーダー(枠線)に使用する画像ファイルを指定する
border-image-width 画像ボーダーの太さを指定する
border-left 要素の左辺にボーダー(枠線)を付ける
border-left-color 要素の左辺に設定したボーダー(枠線)の色を指定する
border-left-style 要素の左辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-left-width 要素の左辺に設定したボーダー(枠線)の太さを指定する
border-length 脚注の区切り線の長さを指定する
border-radius 要素の角丸についてまとめて指定する
border-right 要素の右辺にボーダー(枠線)を付ける
border-right-color 要素の右辺に設定したボーダー(枠線)の色を指定する
border-right-style 要素の右辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-right-width 要素の右辺に設定したボーダー(枠線)の太さを指定する
border-spacing テーブルセルのボーダーの間隔を指定する
border-style ボーダー(枠線)の種類を指定する
border-top 要素の上辺にボーダー(枠線)を付ける
border-top-color 要素の上辺に設定したボーダー(枠線)の色を指定する
border-top-left-radius 要素の左上の角丸を指定する
border-top-right-radius 要素の右上の角丸を指定する
border-top-style 要素の上辺に設定したボーダー(枠線)のスタイル(種類)を指定する
border-top-width 要素の上辺に設定したボーダー(枠線)の太さを指定する
border-width ボーダー(枠線)の太さを指定する
outline アウトラインの表示方法をまとめて指定する
outline-color アウトラインの色を指定する
outline-offset アウトラインのオフセット値を指定する
outline-style アウトラインのスタイルを指定する
outline-width アウトラインの太さを指定する