Title

border-rightとは

ここで説明するborder-right とは次の語句からなるCSSのプロパティです。

border

読み: ボーダー
意味: 領域、縁、端、境界

right

読み: ライト
意味: 右

目次に戻る

border-rightプロパティの概要

このプロパティは要素の右辺の境界線のプロパティを一括指定することができます。

つまり、右辺の境界線の形状や太さ、色を一度に設定することができるということです。

これは以下に挙げるプロパティの設定を一括指定することになります。

• border-right-color
• border-right-style
• border-right-width

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。このプロパティの記述は以下のような書き方になります。

それぞれの値は、半角スペースで区切ります。

セレクター{border-right: 太さの値 形状の値 色の値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

このプロパティは3つの設定値を一度に指定します。 右辺の境界線を設定するためには、width「線の太さ」、style「線の種類」、color「線の色」を設定する必要があります。 設定値を省略することもできますが、設定されない場合は、その設定値は初期値が自動的に設定されます。 ここでは一括プロパティの初期値として3つの設定値を見ていきましょう。

目次に戻る

初期値: medium none currentColor

まず、一括指定のそれぞれの初期値の説明をします。
mediumは中くらいの幅の境界線を表し、noneは境界線の形状で「線の種類=なし」になります。 currentColorは境界線の色であり、指定していない場合にはブラウザの既定色で表示されます。 この3つの設定値で右辺の境界線のスタイルを一括で指定することができます。

下記のサンプルは向かって左が初期値のサンプルです。右辺「right方向」の境界線は表示されていません。 表示されていない理由は「線の種類」の値がnoneになっているからです。 none の意味は「なし」です。つまり「線の種類=なし」と設定しているので境界線は表示されないというわけです。

次に向かって右のサンプルを見て下さい。これは線の種類をsolid値に設定した例です。 solidは境界線が一本線で表示されます。 この指定により、境界線は表示されることになります。 つまり、境界線を表示するためにはnone以外の線の種類を設定する必要があるということです。

サンプルコードはセレクターにdiv要素を使います。

div{border-right: medium none currentColor;}

目次に戻る

キーワード値で線の種類を設定する

線の種類の指定方法を二つのサンプルで説明したいと思います。 先ほど上記でも触れましたが、solidキワードは線の種類の一つで初期値であり1本線で表示されます。 double値は二重線で表示されます。

詳しい線の種類については、 border-style を参照してください。

div{border-right: medium solid currentColor;}
div{border-right: medium double currentColor;}

目次に戻る

キーワード値で線の太さを設定する

線の太さの指定方法を二つのサンプルで説明したいと思います。 左は先ほどと同じmedium値です。mediumは「中くらいの幅の線」で表示されます。 mediumの他、thin「細い境界線」、thick「太い境界線」の値がありますが数値で指定する場合には数値と単位を記述します。 右辺は単位付きの数値で設定しています。

詳しい線の太さの種類については、 border-width を参照してください。
単位付きの数値に関しては、 「CSSの単位について」のページを参照してください。

div{border-right: medium solid currentColor;}
div{border-right: 1em solid currentColor;}

目次に戻る

キーワード値で線の色を設定する

線の色の指定方法を二つのサンプルで説明したいと思います。 currentColorキーワードは、ブラウザの既定色で表示されます。 右辺はカラーキワードのtealを設定していますので青緑の色になります。

詳しい線の色の種類については、 色見本 (カラーサンプル) のページを参照してください。

div{border-right: 4mm solid currentColor;}
div{border-right: 4mm solid ##teal;}

目次に戻る

キーワード値で一括指定する

border-rightプロパティは一括指定のプロパティなので、ここでは右辺のボーダーをいっせいにスタイル付けしていきたいと思います。

太さは4mm、dotted「ドット」、teal「青緑」に設定しています。

このように右辺のボーダーだけを色々なスタイルに簡単に設定することができます。

div{border-right: 4mm dotted ##teal;}

目次に戻る

グローバル値

border-rightプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。

• inheritは親要素の値の継承を促します。
• initialは値を初期値の medium none currentColor に戻します。
• unsetは継承の初期値に戻します。
  ※このプロパティは親要素の値を継承しないのが基本なので、initialと同じ働きをします。

セレクター{border-right: グローバル値;}

目次に戻る

補足説明

• すべての要素に適用可能
• 親要素の値を継承しない

目次に戻る

まとめ

ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。

border-right: medium none currentColor;

border-right: medium solid currentColor;

border-right: medium double currentColor;

border-right: 1em solid currentColor;

border-right: 4mm solid teal;

border-right: 4mm dotted teal;

目次に戻る