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

border-block プロパティ

 border-block プロパティは、ブロックエレメントにおける横書きでは上下、縦書きでは左右の border (枠線)を指定する CSS のプロパティです。 色 border-block-color、線種 border-block-style、太さ border-block-width の各プロパティを一括で指定できます。

border-block プロパティ
.content {
	border-block:3px solid green;
}

.vertical-text{
	writing-mode:vertical-rl;
}
	

詳しくは Example を参照してください

 border-block プロパティは、「縦書き」や「横書き」を指定する writing-mode プロパティとの組み合わせが有用です。
  border-block プロパティは writing-mode との組み合わせで、横書きでは上下の枠線に、縦書きでは左右の枠線として表示されます。

 この「横書き」や「縦書き」の指定にともなうエレメントの幅や高さの設定については、block-sizeinline-size を参照してください。

 上または下のみを表示するには、 border-block-start または border-block-end を使用します。 縦書きになれば右または左のみの表示になります。

ページ内 Index

border-block プロパティについて

 border-block プロパティは、「縦書き」や「横書き」を指定する writing-mode プロパティとの組み合わせが有用です。
  border-block プロパティは writing-mode との組み合わせで、横書きでは上下の枠線に、縦書きでは左右の枠線として表示されます。

border-block プロパティ(横書きの場合)

border-block プロパティの例です。縦書きと横書きの border (枠線)を指定します。

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

border-block プロパティの例です。縦書きと横書きの border (枠線)を指定します。

 上記の例では、「横書き」での上下の枠線と「縦書き」での左右の枠線が同じ設定になります。

 border-block プロパティは横書きと縦書きの表示を切り替えても統一感のある設定ができます。

 border-block プロパティの対は border-inline プロパティです。border-inline プロパティは横書きでは上下、縦書きでは左右の枠線になります。

構文(Syntax)

CSS

border-block: border-block-width border-block-style border-block-color ;

*border-block-style を指定しないと border は表示されません。

DOM ( JavaScript )

値の取得
String = object.style.borderBlock;
値の設定
object.style.backdropFilter = " border-block-width border-block-style border-block-color ";

値(Values)

Value摘要
border-block-width線(border)の太さ、初期値はmedium
border-block-style線種で、初期値はnone。以下を参照
border-block-colorCSS Colorを参照
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

 border-block プロパティは、border-block-widthborder-block-styleborder-block-color の値を組み合わせることができます。
  ただし、*-style を指定しないと border-block は表示されません。

border-block-style の値

 border-block-style で指定できる値には以下があります。

Value摘要
none初期値(default値)
hidden非表示
dottedドット点線
dashed点線
solid実線
double二重線
groove3D丸みのある隆起した線
ridge3D隆起した線
insetエレメント全体を凹んだ立体にみせる
outsetエレメント全体を立体にみせる
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

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