【border-right】右のボーダーの色・太さ・スタイルを指定

border-rightプロパティでは、右のボーダーの色・太さ・スタイルを一括で(まとめて)指定することができます。 色・太さ・スタイルの中から設定したい値を任意の順番で並べ、半角スペースで区切って指定して下さい。

ここで指定しなかった値は、それぞれのプロパティ(border-colorborder-widthborder-style)の初期値が適用されます。

なおborder-styleの値を省略した場合、その値に初期値の「none」が適用されるため、右のボーダーは表示されません。 ボーダーを表示したい場合は、「none」「hidden」以外をborder-styleの値に記述して下さい。

また上下左右のボーダーの色・太さ・スタイルをまとめて指定したい場合は、borderプロパティを使用します

書式

  • border-right : ★ ■ ♥ ……… 右のボーダーの色・太さ・スタイルをまとめて指定

★:border-colorの値(ボーダーの色)
■:border-widthの値(ボーダーの太さ)
♥:border-styleの値(ボーダーのスタイル)

border-colorの値(色)

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

border-widthの値(太さ)

実数値+単位
数値にpxなどの単位をつけてボーダーの太さを指定します。負の値は指定できません。
thin
細い線で表示します。
medium
中くらいの線で表示します。
thick
太い線で表示します。

border-styleの値(スタイル)

none
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、他の値が優先されます。(初期値)
hidden
ボーダーを表示しません。太さも「0」となります。テーブルのセルなどのボーダー(枠線)が重なり合う場合には、この値(hidden)が優先されます。
dotted
点線で表示します
dashed
破線で表示します
solid
一本線で表示します
double
二重線で表示します
groove
へこんで見えるように見える立体的な線で表示します
ridge
浮き上がったように見える立体的な線で表示します
inset
ボーダーの内側がへこんだように見える立体的な線で表示します(ボーダーの上と左が暗色、下と右が明色となります。)
outset
ボーダーの内側が浮き上がったように見える立体的な線で表示します(ボーダーの上と左が明色、下と右が暗色となります。)

使用した時の例

.sample1 {border-right: solid 8px #F48282;}
.sample2 {border-right: double #0000FF;}
.sample3 {border-right: dotted;}
<div class="sample1">[スタイル]solid [太さ]8px [色]#F48282</div>
<div class="sample2">[スタイル]double [色]#0000FF</div>
<div class="sample3">[スタイル]dotted</div>

ブラウザ上の表示例

[スタイル]solid [太さ]8px [色]#F48282
[スタイル]double [色]#0000FF
[スタイル]dotted

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

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

関連情報