CSS border-block-start-color プロパティを使いこなして、ワンランク上のデザインを目指そう！

CSS Miscellaneous: border-block-start-color

border-block-start-color は、要素のブロック方向の開始側の境界線の色を設定するプロパティです。ブロック方向は、縦書きの場合は左から右、横書きの場合は上から下となります。

詳細

border-block-start-color は以下の要素に適用されます。

• インライン要素
• ブロック要素
• グリッドレイアウト要素
• テーブルレイアウト要素
• フローティング要素

値

border-block-start-color は以下の値を受け取ります。

• <color>: カラー値
• transparent: 境界線を透明にする
• inherit: 親要素から値を継承する
• initial: 初期値
• revert: 要素のスタイル計算における初期値
• revert-layer: 要素のスタイル計算における前のレイヤーの値

例

/* すべての要素のブロック方向の開始側の境界線の色を青色にする */
body {
  border-block-start-color: blue;
}

/* 特定の要素のブロック方向の開始側の境界線の色を緑色にする */
.my-element {
  border-block-start-color: green;
}

補足

• border-block-start-color は、border-block-end-color、border-inline-start-color、border-inline-end-color と合わせて使用することで、要素のすべての境界線の色を設定することができます。
• border-block-start-color は、border-color の省略形としても使用できます。

• border-block-start-color は CSS3 で導入されたプロパティです。
• すべてのブラウザで対応しているわけではありません。

補足：writing-mode の影響

writing-mode プロパティによって、ブロック方向は変化します。以下に、writing-mode の値と、それに応じた border-block-start-color の適用例を示します。

• writing-mode: horizontal-tb (デフォルト): 横書き、上から下
• writing-mode: vertical-lr: 縦書き、左から右

例

/* 横書きの場合 */
body {
  writing-mode: horizontal-tb;
  border-block-start-color: blue; /* 上部の境界線が青色になる */
}

/* 縦書き（左から右）の場合 */
body {
  writing-mode: vertical-lr;
  border-block-start-color: blue; /* 左側の境界線が青色になる */
}

/* 縦書き（右から左）の場合 */
body {
  writing-mode: vertical-rl;
  border-block-start-color: blue; /* 右側の境界線が青色になる */
}

border-block-start-color のサンプルコード

基本的な使い方

/* すべての要素の上部の境界線を青色にする */
body {
  border-block-start-color: blue;
}

/* 特定の要素の上部の境界線を緑色にする */
.my-element {
  border-block-start-color: green;
}

/* 上部の境界線を太くする */
.my-element {
  border-block-start-color: green;
  border-block-start-width: 5px;
}

/* 上部の境界線を破線にする */
.my-element {
  border-block-start-color: green;
  border-block-start-style: dashed;
}

writing-mode の影響

/* 横書きの場合 */
body {
  writing-mode: horizontal-tb;
  border-block-start-color: blue; /* 上部の境界線が青色になる */
}

/* 縦書き（左から右）の場合 */
body {
  writing-mode: vertical-lr;
  border-block-start-color: blue; /* 左側の境界線が青色になる */
}

/* 縦書き（右から左）の場合 */
body {
  writing-mode: vertical-rl;
  border-block-start-color: blue; /* 右側の境界線が青色になる */
}

複雑な例

/* 要素の上部の境界線を、要素の背景色に応じて変化させる */
.my-element {
  border-block-start-color: hsl(
    hue-rotate(
      calc(
        var(--hue) +
        (var(--saturation) * var(--lightness)) / 100
      )
    )
  );
}

• 上記のコードはほんの一例です。
• 詳しくは、以下の参考資料を参照してください。

border-top-color プロパティを使用する

border-block-start-color プロパティは、border-top-color プロパティと同じ役割を果たします。そのため、border-block-start-color プロパティに対応していないブラウザでは、border-top-color プロパティを使用して、要素の上部の境界線の色を設定することができます。

/* すべての要素の上部の境界線を青色にする */
body {
  border-top-color: blue;
}

border-color プロパティは、要素のすべての境界線の色を設定するプロパティです。このプロパティを使用して、要素の上部の境界線の色を設定することができます。

/* すべての要素の上部の境界線を青色にする */
body {
  border-color: blue;
}

border-style プロパティと border-width プロパティを使用して、要素の上部の境界線のスタイルと太さを設定することができます。

/* すべての要素の上部の境界線を太くする */
body {
  border-top-style: solid;
  border-top-width: 5px;
}

画像を使用して、要素の上部の境界線を表現することができます。

<div class="my-element">
  <img src="border.png" alt="Border" />
  ...
</div>

注意点

• 上記の代替方法は、border-block-start-color プロパティと同じ機能を提供できない場合があります。
• すべてのブラウザで同じように表示されない場合があります。

border-block-start-color プロパティは、新しいプロパティであるため、すべてのブラウザで対応しているわけではありません。そのため、代替方法を使用する必要がある場合があります。