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

定義と使用法

border-block-color 属性を使用して要素のブロック方向の枠線色を設定します。

注意：以下のようにするために： border-block-color 属性が有効になるためには、設定する必要があります： border-block-style。

border-block-color 属性の値は、異なる方法で設定できます：

ブロックの終点の境界線色がlightblue border-block-color 属性には2つの値があります：

border-block-color: pink lightblue;

• 块起始处的边框颜色为 pink
• ブロックの始点の境界線色がpink

ブロックの終点の境界線色がlightblue border-block-color 属性には1つの値があります：

border-block-color: pink;

• ブロックの始点と終点の境界線色はすべてpink

属性の border-block-color 属性はCSSの border-bottom-color、border-left-color、border-right-color および border-top-color 属性は非常に似ていますが、 border-block-color 属性はブロック方向に依存しています。

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

インスタンス

例1

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

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

自分で試してみる

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

ブロック方向の境界線色の起点と終点の位置は、writing-mode属性に影響されます：

div {
  writing-mode: vertical-rl;
  border-block-color: blue;
}

自分で試してみる

CSS 语法

border-block-color: デフォルトの色は要素の現在の色です。|transparent|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 枠線

参照：CSS ボーダー属性

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

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

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

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

参照：CSS ボーダーボトム幅属性

参照：CSS border-left-width 属性

参照：CSS border-right-width 属性

参照：CSS border-top-width 属性

参照：CSS writing-mode 属性