border-inline
border-inline は、文字が並ぶ向き（インライン方向）の始まりと終わりの 2 辺に、同じ枠線をまとめて引くショートハンドです。横書きでは左右の枠線にあたります。
構文
<line-width> || <line-style> || <color>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
ショートハンドの内訳
border-inline8pxborder-inline-width
solidborder-inline-style
#88d1c7border-inline-color
コード
.box {
border-inline: 8px solid #88d1c7;
}コントロール
border-inline-width8px
border-inline-stylesolid
border-inline-color#88d1c7
解説
値の書き方
- border と同じく、太さ・線種・色を順不同で書き、どれかを省けます。省いたものは初期値（
medium・none・currentcolor）になるので、線種を省くと枠線は出ません。 - 2 辺に同じ値を付けます。始まりと終わりで変えたいときは、
border-inline-startとborder-inline-endを後から書きます。
プレビューは左から右への横書きなので、左右に枠線が付きます。
向きで変わること
writing-mode: vertical-rlなどの縦書きでは、上下の枠線になります。- どの辺になるかは、親ではなくその要素自身の writing-mode で決まります。
よく使う場面
縦書きと横書きを切り替えるページで、文字の並ぶ向きの両端に区切り線を引くときに使います。
気をつけること
- 横書きでは border-left・border-right と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
- border とちがい、
border-imageは初期値に戻しません。 - 主要なブラウザすべてで使えます。