CSS プロパティ border-right

CSS プロパティ border-right: 要素に右枠線を設定する

CSS プロパティ border-right: 要素に右枠線を設定する

border-right プロパティは、要素の右側の枠線のスタイルを一度に設定するための CSS ショートハンドプロパティです。

これには、border-right-width、border-right-style、border-right-color が含まれます。

構文

border-right: border-right-width border-right-style border-right-color;

設定可能な値

  • border-right-width: 右枠線の幅を設定

    • 以下の長さの単位を使用できます。
      • px
      • em
      • rem
      • %
      • vw
      • vh
    • 以下のキーワードも使用できます。
      • thin
      • medium
      • thick

  • border-right-style: 右枠線のスタイルを設定

    • 以下のいずれかの値を使用できます。
      • none
      • hidden
      • dotted
      • dashed
      • solid
      • double
      • groove
      • ridge
      • inset
      • outset

  • border-right-color: 右枠線の色を設定

    • 有効な色の値を使用できます。
      • 色名 (例: red, blue, green)
      • 16進数値 (例: #ff0000, #0000ff)
      • RGB 値 (例: rgb(255, 0, 0), rgb(0, 0, 255))
      • HSL 値

使用例

例1: 幅2pxの赤い実線枠線を設定する

.example1 {
  border-right: 2px solid red;
}

<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
  border-right: 2px solid red;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div class="example1"></div>

</body>
</html>

例2: 幅5pxの青い破線枠線を設定する

.example2 {
  border-right: 5px dashed blue;
}

<!DOCTYPE html>
<html>
<head>
<style>
.example2 {
  border-right: 5px dashed blue;
  width: 100px;
  height: 100px;
}
</style>
</head>
<body>

<div class="example2"></div>

</body>
</html>

各プロパティの詳細と使用例

border-right-width

border-right-width プロパティは、要素の右側の枠線の幅を設定します。px、em、rem などの単位や、thin、medium、thick などのキーワードを使用して指定できます。

値 説明
thin 薄い枠線を設定します (通常は 1px)
medium 中くらいの太さの枠線を設定します (通常は 3px)
thick 太い枠線を設定します (通常は 5px)
<length> 枠線の幅を指定した長さで設定します。 
/* 5px の幅の枠線 */
border-right-width: 5px;

/* 薄い枠線 */
border-right-width: thin;

/* 親要素のフォントサイズの 2 倍の幅の枠線 */
border-right-width: 2em;

border-right-style

border-right-style プロパティは、要素の右側の枠線のスタイルを設定します。実線、点線、破線など、さまざまなスタイルを設定できます。

値 説明
none 枠線を表示しません。
hidden 枠線を表示しません (border-collapse プロパティの影響を受けます)。
dotted 点線を表示します。
dashed 破線を表示します。
solid 実線を表示します。
double 二重線を表示します。
groove 彫り込みのように見える枠線を設定します。
ridge 浮き出しのように見える枠線を設定します。
inset 要素を埋め込んで表示するように見える枠線を設定します。
outset 要素を浮き出して表示するように見える枠線を設定します。 
/* 赤い点線 */
border-right-style: dotted;
border-right-color: red;

/* 緑の破線 */
border-right-style: dashed;
border-right-color: green;

/* 青い二重線 */
border-right-style: double;
border-right-color: blue;

border-right-color

border-right-color プロパティは、要素の右側の枠線の色を設定します。色名、16進数値、RGB 値、HSL 値などを使用して指定できます。

/* 赤い枠線 */
border-right-color: red;

/* 16進数値で指定した青い枠線 */
border-right-color: #0000FF;

/* RGB 値で指定した緑の枠線 */
border-right-color: rgb(0, 255, 0);

注意事項

  • border-right プロパティは、他の border プロパティと一緒に使用することも、単独で使用することもできます。
  • 値を省略した場合、デフォルト値が使用されます。たとえば、border-right: solid red; は border-right: medium solid red; と同じです。
  • border-right プロパティを使用すると、それぞれの枠線プロパティを個別に設定する必要がなくなり、要素に簡単に右枠線を設定できます。

参考資料

よくある質問

Q1: border-right プロパティと border プロパティの違いは何ですか？

border プロパティは、要素のすべての枠線を一度に設定するためのショートハンドプロパティです。一方、border-right プロパティは、要素の右側の枠線のみを設定するためのショートハンドプロパティです。

Q2: border-right-style プロパティで設定できるスタイルにはどのようなものがありますか？

border-right-style プロパティでは、実線 (solid)、点線 (dotted)、破線 (dashed)、二重線 (double) など、さまざまなスタイルを設定できます。詳細については、上記の「border-right-style」セクションを参照してください。

Q3: border-right プロパティを使用して、要素の右側にのみ枠線を表示するにはどうすればよいですか？

要素の右側にのみ枠線を表示するには、他の 3 辺の枠線を none に設定します。

.example {
  border-top: none;
  border-right: 2px solid black;
  border-bottom: none;
  border-left: none;
}