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

コース推薦：

border-inline-color 定義と用法

注意：属性を設定して、要素の行内方向の枠線色を指定します。 border-inline-color 属性が有効になるためには、設定する必要があります： border-inline-style。

border-inline-color 属性的値は異なる方法で設定できます：

もし border-inline-color 属性には2つの値があります：

border-inline-color: pink blue;

• 行内開始位置の枠線色がピンクです
• 行内終了位置の枠線色が青です

もし border-inline-color 属性には1つの値があります：

border-inline-color: blue;

• 行内開始位置と終了位置の枠線色が青です

CSS の border-inline-color 属性与 border-bottom-color、border-left-color、border-right-color そして border-top-color 属性は非常に似ていますが、 border-inline-color 属性はインライン方向に依存しています。

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

インスタンス

例 1

インライン方向のボーダーに色を設定します：

#example1 {
  border-inline-style: solid;
  border-inline-color: pink;
}
#example2 {
  border-inline-style: solid;
  border-inline-color: pink lightblue;
}

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

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

インライン方向の始めと終わりのボーダーは、 writing-mode 属性の影響：

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

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

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

インライン方向の始めと終わりのボーダーは、 direction 属性の影響：

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

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

CSS文法

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

参照：CSS border-inline-style 属性

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

参照：CSS border-left-color 属性

参照：CSS border-right-color 属性

参照：CSS border-top-color 属性

参照：CSS direction 属性

参照：CSS text-orientation 属性

参照：CSS writing-mode 属性