ウェブランサー

border-right-style - 要素の右辺に設定したボーダー(枠線)のスタイル(線種)を指定する

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

border-right-styleプロパティの説明

border-right-styleは、要素の右辺に設定したボーダー(枠線)のスタイルを指定する際に使用します。ボーダーのパラメーターには、見た目を変更するための値が予め用意されています。二重線や点線、立体的に見えるものなど、デザインの都合や要素が表す機能に応じて任意に変えることができます。このプロパティはあまりにも限定的な値を操作するものであり、実際の制作現場において使用する場面は多くありません。

ボーダースタイルを上下左右まとめて指定する場合には、border-styleを使います。右辺のボーダーについて複数のパラメーターをまとめて指定する場合には、border-rightを使います。

border-right-styleに与えられる値

border-right-style: none;
ボーダーを表示させません。太さも0になります。これが初期値です。
border-right-style: hidden;
ボーダーを隠します。太さ0の扱いになります。
border-right-style: solid;
1本の実線で表示します。
border-right-style: double;
2本の実線で表示します。
border-right-style: dashed;
ボーダーが破線で表示されます。
border-right-style: dotted;
ボーダーが点線で表示されます。
border-right-style: ridge;
左上に光源のある、立体的に隆起した線で表示されます。
border-right-style: groove;
右下に光源のある、立体的に隆起した線で表示されます。
border-right-style: outset;
上辺と左辺のボーダーが明るく、底辺と右辺のボーダーが暗く表示され、ボーダーで囲まれた要素が立体的に隆起して見えます。
border-right-style: inset;
上辺と左辺のボーダーが暗く、底辺と右辺のボーダーが明るく表示され、ボーダーで囲まれた要素が立体的に窪んで見えます。

border-right-colorの使用サンプル

CSS
.box_sample {
 padding: 5px;
 margin: 0 0 10px 0;
}
.border_solid {
 border-right-width: 3px;
 border-right-style: solid;
}
.border_double {
 border-right-width: 3px;
 border-right-style: double;
}
.border_dashed {
 border-right-width: 3px;
 border-right-style: dashed;
}
.border_dotted {
 border-right-width: 3px;
 border-right-style: dotted;
}
.border_ridge {
 border-width: 8px;
 border-style: ridge;
}
.border_groove {
 border-width: 8px;
 border-style: groove;
}
.border_outset {
 border-width: 5px;
 border-style: outset;
}
.border_inset {
 border-width: 5px;
 border-style: inset;
}
.border_none {
 border-width: 5px;
 border-style: none;
}
.border_hidden {
 border-width: 5px;
 border-style: hidden;
}
HTML
<div class="box_sample border_solid">
border-right-width: 3px;<br>
border-right-style: solid;<br>
</div>

<div class="box_sample border_double">
border-right-width: 3px;<br>
border-right-style: double;<br>
</div>

<div class="box_sample border_dashed">
border-right-width: 3px;<br>
border-right-style: dashed;<br>
</div>

<div class="box_sample border_dotted">
border-right-width: 3px;<br>
border-right-style: dotted;<br>
</div>

<div class="box_sample border_ridge">
border-width: 8px;<br>
border-style: ridge;<br>
</div>

<div class="box_sample border_groove">
border-width: 8px;<br>
border-style: groove;<br>
</div>

<div class="box_sample border_outset">
border-width: 5px;<br>
border-style: outset;<br>
</div>

<div class="box_sample border_inset">
border-width: 5px;<br>
border-style: inset;<br>
</div>

<div class="box_sample border_none">
border-width: 5px;<br>
border-style: none;<br>
</div>

<div class="box_sample border_hidden">
border-width: 5px;<br>
border-style: hidden;<br>
</div>
表示確認
border-right-width: 3px;
border-right-style: solid;
border-right-width: 3px;
border-right-style: double;
border-right-width: 3px;
border-right-style: dashed;
border-right-width: 3px;
border-right-style: dotted;
border-width: 8px;
border-style: ridge;
border-width: 8px;
border-style: groove;
border-width: 5px;
border-style: outset;
border-width: 5px;
border-style: inset;
border-width: 5px;
border-style: none;
border-width: 5px;
border-style: hidden;

border-right-styleに関連する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 アウトラインの太さを指定する