CSS ボーダーインラインエンドカラー属性

定义和用法

border-inline-end-color 属性设置元素在其行内方向末端的边框颜色。

注意：要使 border-inline-end-color 属性生效，必须设置 border-inline-end-style 属性。

CSS border-inline-end-color 属性と border-bottom-color、border-left-color、border-right-color そして border-top-color 属性は非常に似ていますが、 border-inline-end-color 属性は行内方向に依存しています。

注意：関連する CSS 属性 writing-mode、text-orientation そして direction 行内方向を定義します。これは一行の始まりと終わりの位置、および border-inline-end-color 属性の効果。英語のページでは、行内方向は左から右、ブロック方向は下に向かっています。

インスタンス

例 1

行内方向の末端のボーダーに色を設定します：

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

実際に試してみてください

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

行内方向の末端のボーダーの位置は、 writing-mode 属性の影響：

div {
  border-inline-end-style: solid;
  writing-mode: vertical-rl;
  border-inline-end-color: blue;
}

実際に試してみてください

例 3：direction 属性の組み合わせ

行内方向の末端のボーダーの位置は、 direction 属性の影響：

div {
  direction: rtl;
  border-inline-end-color: hotpink;
}

実際に試してみてください

CSS 文法

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

属性値

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

技術的詳細

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

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 边框

参照：CSS ボーダー属性

参照：CSS ボーダーインライン属性

参照：CSS ボーダーインラインエンドスタイル属性

参照：CSS border-inline-start-color 属性

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

参照：CSS border-left-color 属性

参照：CSS border-right-color 属性

参照：CSS border-top-color 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性