border-inline-end-width

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

border-inline-end-widthCSS のプロパティで、要素の論理的なインライン方向の終端側の境界の幅を定義し、それが要素の書字方向やテキストの方向に応じて物理的な境界の幅に対応付けられます。これは border-top-width, border-right-width, border-bottom-width, border-left-width の何れかに対応し、どれに対応するかは writing-mode, direction, text-orientation で定義された値によって決まります。

構文

/* <'border-width'> 値 */
border-inline-end-width: 2px;
border-inline-end-width: thick;

関連するプロパティとしては、 border-block-start-width, border-block-end-width, border-inline-start-width が要素の他の境界の幅を定義します。

初期値medium
適用対象すべての要素
継承なし
パーセンテージlogical-width of containing block
メディア視覚
計算値absolute length; 0 if the border style is none or hidden
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

<'border-width'>
境界の幅です。 border-width を参照してください。

形式文法

<'border-top-width'>

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-inline-end-width: 5px;
}

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-inline-end-width
実験的
Chrome 完全対応 69Edge 未対応 なしFirefox 完全対応 41
完全対応 41
完全対応 38
補足 無効
補足 Enabled by default since Firefox 41.
無効 From version 38: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 3
代替名
代替名 非標準の名前 -moz-border-end-width を使用しています。
IE 未対応 なしOpera 完全対応 56Safari 完全対応 12.1WebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 41
完全対応 41
完全対応 38
補足 無効
補足 Enabled by default since Firefox 41.
無効 From version 38: this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 4
代替名
代替名 非標準の名前 -moz-border-end-width を使用しています。
Opera Android 完全対応 48Safari iOS 完全対応 12.2Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。

関連情報