border-inline-style は CSS のプロパティで、要素の論理的なインライン方向の境界のスタイルを、要素の書字方向やテキストの向きに応じて物理的な境界のスタイルに割り当てて定義します。これは 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 の定義 |
編集者草案 | 初回定義。 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-inline-style | Chrome 完全対応 69 | Edge 完全対応 79 | Firefox 完全対応 66 | IE 未対応 なし | Opera 完全対応 56 | Safari 未対応 なし | WebView Android 完全対応 69 | Chrome Android 完全対応 69 | Firefox Android 完全対応 66 | Opera Android 完全対応 48 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 10.0 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
関連情報
- このプロパティは物理的な境界のプロパティ
border-top-style,border-right-style,border-bottom-style,border-left-styleのうちの一つに割り当てられます。 writing-mode,direction,text-orientation