border-inline-style

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

border-inline-styleCSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは border-top-style および border-bottom-style、または border-left-style および border-right-style プロパティに、 writing-mode, direction, text-orientation で定義された値に応じて対応します。

/* <'border-style'> の値 */
border-inline-style: dashed;
border-inline-style: dotted;
border-inline-style: groove;

他の方向の境界スタイルは border-block-style で設定することができ、これは border-block-start-style および border-block-end-style を定義します。

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

構文

<'border-style'>
境界線のスタイルです。 border-style を参照してください。

形式文法

<'border-top-style'>

HTML

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

CSS

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

.exampleText {
  writing-mode: vertical-lr;
  border: 5px solid blue;
  border-inline-style: dashed;
}

仕様書

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

ブラウザーの互換性

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

凡例

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

関連情報