CSS ボーダーブロックエンドカラー属性

定義と使用方法

border-block-end-color 属性を設定する必要があります。

属性はブロック方向に依存しています。属性を使用するには、 border-block-end-color 属性を使用して、要素のブロック方向の末端の境界線色を設定する必要があります。 border-block-end-style 属性が有効になるためには、

属性と非常に似ていますが、 CSS border-block-end-color 属性は、CSS属性border-left-widthborder-bottom-widthborder-left-width、 border-right-width および border-top-width border-block-end-color 非常に似ているが、

属性はブロック方向に依存しています。注意： writing-mode ブロック方向を定義します。これにより、ブロックの開始位置と終了位置および関連するCSS属性が影響されます。 border-block-end-color 属性の結果。英語ページでは、インライン方向は左から右、ブロック方向は下に向かっています。

インスタンス

例1

ブロック方向の末端の境界線に色を設定します：

div {
  border-block-end-style: solid;
  border-block-end-color: pink;
}

実際に試してみる

例2：writing-mode属性の組み合わせ

ブロック方向の末端の境界線色の位置は、 writing-mode 属性の影響：

div {
  border-block-end-style: solid;
  writing-mode: vertical-rl;
  border-block-end-color: 5px;
}

実際に試してみる

CSS文法

border-block-end-color: color|transparent|initial|inherit;

属性値

値 説明
color 指定された境界線色。デフォルトは要素の現在の色です。参照：CSS カラーバリュー。
transparent 指定された境界線色は透明であるべきです。
initial この属性をデフォルト値に設定します。参照： initial。
inherit この属性は、親要素からこの属性を継承します。参照： inherit。

技術的詳細

デフォルト値： 要素の現在の色
継承性： いいえ
アニメーション作成： サポート。参照：アニメーション関連属性。
バージョン： CSS3
JavaScript文法： object.style.borderBlockEndColor="pink"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 边框

参照：CSS ボーダー属性

参照：CSS ボーダーブロック属性

参照：CSS ボーダーブロックカラー属性

参照：CSS ボーダーブロックスタートカラー属性

参照：CSS ボーダーブロックエンドスタイル属性

参照：CSS ボーダーボトムカラー属性

参照：CSS border-left-color 属性

参照：CSS border-right-color 属性

参照：CSS border-top-color 属性

参照：CSS writing-mode 属性