border-inline-width

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

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

/* <'border-width'> 値 */
border-inline-width: 5px 10px;
border-inline-width: 5px;
border-inline-width: thick;

他の方向の境界の幅については、 border-block-width によって、 border-block-start-widthborder-block-end-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-width: 5px 10px;
}

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
border-inline-widthChrome 完全対応 69Edge 完全対応 79Firefox 完全対応 66IE 未対応 なしOpera 完全対応 56Safari 未対応 なしWebView Android 完全対応 69Chrome Android 完全対応 69Firefox Android 完全対応 66Opera Android 完全対応 48Safari iOS 未対応 なしSamsung Internet Android 完全対応 10.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報