CSS プロパティ border-right-style

CSS プロパティ border-right-style: 要素の右側の枠線のスタイルをカスタマイズする

CSS プロパティ border-right-style: 要素の右側の枠線のスタイルをカスタマイズする

border-right-style プロパティは、要素の右側の枠線のスタイルを設定するために使用されます。実線、点線、破線など、定義済みの線スタイルから選択したり、枠線を非表示にしたりできます。

1. 構文と値

border-right-style プロパティの構文は次のとおりです。 


border-right-style: 値;

使用可能な値とその簡単な説明を以下に示します。

値 説明
none 枠線なし。
hidden 枠線を非表示にする。 none と似ていますが、表のセル間の枠線など、一部の境界線では異なる動作をします。
dotted 点線による枠線。
dashed 破線による枠線。
solid 実線による枠線。
double 二重線による枠線。線の太さは border-right-width で設定します。
groove 凹んだような枠線。3D 効果が適用されます。
ridge 浮かび上がったような枠線。3D 効果が適用されます。
inset 凹んだような枠線。要素が周囲に沈み込んでいるように見えます。3D 効果が適用されます。
outset 浮かび上がったような枠線。要素が周囲から飛び出しているように見えます。3D 効果が適用されます。

2. 使用例

異なる border-right-style 値を使用した HTML と CSS のコード例を以下に示します。 


<div class="dotted-border">点線による枠線</div>
<div class="dashed-border">破線による枠線</div>


.dotted-border {
  border-right-style: dotted;
  border-right-width: 5px;
  border-right-color: blue;
}

.dashed-border {
  border-right-style: dashed;
  border-right-width: 5px;
  border-right-color: red;
}

上記のコードを実行すると、青い点線と赤い破線の枠線が表示されます。

3. 他の枠線プロパティとの関係

border-right-style プロパティは、border-right-width、border-right-color、border などの他の枠線プロパティと連携して動作します。
  • border-right-width は、右側の枠線の幅を設定します。
  • border-right-color は、右側の枠線の色を設定します。
  • border は、すべての側面の枠線を一度に設定するためのショートハンドプロパティです。 border-right-style、border-right-width、border-right-color を個別に設定する代わりに使用できます。

4. ブラウザの互換性

border-right-style プロパティは、すべての主要なブラウザでサポートされています。

ブラウザ バージョン
Chrome 1 以上
Firefox 1 以上
Safari 3 以上
Edge すべて
Opera 7 以上
Internet Explorer 4 以上

参考資料

よくある質問

1. border-right-style: hidden; と border-right-style: none; の違いは何ですか？

どちらも枠線を非表示にしますが、表のセル間の枠線など、一部の境界線では異なる動作をします。 hidden は、表のセルの枠線を非表示にする場合に適しています。

2. border-right-style を使用して、右側の枠線だけを非表示にすることはできますか？

はい、できます。 border-right-style プロパティを none または hidden に設定することで、右側の枠線だけを非表示にすることができます。

3. border-right-style を使用して、右側の枠線を点線に設定するにはどうすればよいですか？

border-right-style プロパティを dotted に設定することで、右側の枠線を点線に設定できます。