備忘録的プログラミングリファレンス

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-inline プロパティの例です。縦書きと横書きの border (枠線)を指定します。

border-inline プロパティ(縦書きの場合)

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-colorCSS Colorを参照
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

 border-inline プロパティは、複数の値を組み合わせることができます。

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
CSS AnimationYes

Example

 border-inline プロパティの例です。 横書きと縦書き同じ値を指定しています。横書きの場合は高さとして、縦書きの場合は幅として設定されます。