border-inline プロパティ
border-inline プロパティは、ブロックエレメントにおける横書きでは左右、縦書きでは上下の border （枠線）を指定する CSS のプロパティです。 border-inline-color、border-inline-style、border-inline-width の各プロパティを一括で指定できます。
border-inline プロパティは、writing-mode との組み合わせが有用です。 writing-mode と border-inline プロパティの組み合わせで、横書きでは上下の枠線に、縦書きでは左右の枠線として表示されます。
border-inline プロパティの例です。縦書きと横書きの border （枠線）を指定します。
border-inline プロパティの例です。縦書きと横書きの border （枠線）を指定します。
上記の例では、横書きでの左右の枠線と縦書きでの上下の枠線が同じ border-inline プロパティの設定です。
.content {
border-inline:3px solid green;
}
詳しくは Example を参照してください
border-inline プロパティは横書きと縦書きの表示を切り替えるような場合に便利です。
border-inline プロパティの対は border-block プロパティです。border-block プロパティは横書きでは上下、縦書きでは左右の枠線になります。
左または右のみを表示するには、 border-inline-start または border-inline-end を使用します。 縦書きになれば上または下のみの表示になります。
ページ内 Index
構文(Syntax)
CSS
border-inline: border-inline-width border-inline-style border-inline-color ;
＊border-inline-style を指定しないと border は表示されません。
DOM ( JavaScript )
String = object.style.borderInline;
object.style..borderInline = " border-inline-width border-inline-style border-inline-color ";
値（Values）
| Value | 摘要 |
|---|---|
| border-inline-width | 線(border)の太さ、初期値はmedium |
| border-inline-style | 線種で、初期値はnone |
| border-inline-color | CSS Colorを参照 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
border-inline プロパティは、複数の値を組み合わせることができます。
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
border-inline プロパティの例です。 横書きと縦書き同じ値を指定しています。横書きの場合は高さとして、縦書きの場合は幅として設定されます。
関連する CSS プロパティ
以下のような border-block に関連する CSS プロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| border-block | 横書きでは上下、縦書きでは左右の border （枠線） |
| border-inline | 横書きでは左右、縦書きでは上下の border （枠線） |
| block-size | 横書きでは高さ、縦書きでは幅に設定される |
| inline-size | 横書きでは幅、縦書きでは高さに設定される |
| direction | テキストの右寄せ、左寄せ |
| unicode-bidi | Unicodeの記述方向を指定 |
| text-orientation | 縦書きテキストにおけるフォントの向き |
| writing-mode | テキストの記述方向 |