border-block-color

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

border-block-end-colorCSS のプロパティで、要素の論理的なブロックの終端側の境界色を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界色に対応付けられます。これは border-top-color および border-bottom-color、または border-right-color および border-left-color のどちらかに対応し、どちらに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。

border-block-color: yellow;
border-block-color: #F5F6F7;

他の方向の境界については、 border-block-color によって、 border-block-start-colorborder-block-end-color の両方を設定することができます。

初期値currentcolor
適用対象すべての要素
継承なし
メディア視覚
計算値色の計算値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

構文

<'color'>
境界の色です。 color を参照してください。

形式文法

<'border-top-color'>{1,2}

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-color: red;
}

仕様書

仕様書 状態 備考
CSS Logical Properties and Values Level 1
border-block-color の定義
編集者草案 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-block-colorChrome 完全対応 69
無効
完全対応 69
無効
無効 From version 69: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 66IE 未対応 なしOpera 完全対応 56
無効
完全対応 56
無効
無効 From version 56: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled).
Safari 未対応 なしWebView Android 未対応 なしChrome Android 完全対応 69
無効
完全対応 69
無効
無効 From version 69: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 66Opera Android 完全対応 48
無効
完全対応 48
無効
無効 From version 48: this feature is behind the Experimental Web Platform Features preference (needs to be set to enabled).
Safari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報