【border-right-width】右のボーダー(枠線)の太さを指定

border-right-widthプロパティでは、右のボーダー(枠線)の太さを個別に指定することができます。

ボーダーの太さを数値で指定する場合は、負の値は指定することができません。 またキーワードで指定する場合は、実際に表示される太さはブラウザに依存します。

なおボーダーの種類は初期値が「none」のため、border-right-widthを指定しただけでは、ボーダーは表示されません。 ボーダーの太さ(幅)の指定を有効にするには、border-right-widthと併せてボーダーの種類(border-style)を指定し、値を「none」「hidden」以外に設定して下さい。

上下左右のボーダーの太さをまとめて指定したい場合は、border-widthを使用します。

書式

  • border-right-width : ……… 右のボーダーの太さを個別指定

★:thin、medium、thick、実数値+単位、inherit

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

使用した時の例

p {border-style:solid;}
 
.sample1 {border-right-width:10px;}
.sample2 {border-right-width:thin;}
.sample3 {border-right-width:medium;}
.sample4 {border-right-width:thick;}
<p class="sample1">10px</p>
<p class="sample2">thin</p>
<p class="sample3">medium</p>
<p class="sample4">thick</p>

ブラウザ上の表示例

10px

thin

medium

thick

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

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

関連情報