border-block プロパティ
border-block プロパティは、ブロックエレメントにおける横書きでは上下、縦書きでは左右の border （枠線）を指定する CSS のプロパティです。 色 border-block-color、線種 border-block-style、太さ border-block-width の各プロパティを一括で指定できます。
.content {
border-block:3px solid green;
}
.vertical-text{
writing-mode:vertical-rl;
}
詳しくは Example を参照してください
border-block プロパティは、「縦書き」や「横書き」を指定する writing-mode プロパティとの組み合わせが有用です。
border-block プロパティは writing-mode との組み合わせで、横書きでは上下の枠線に、縦書きでは左右の枠線として表示されます。
この「横書き」や「縦書き」の指定にともなうエレメントの幅や高さの設定については、block-size、inline-size を参照してください。
上または下のみを表示するには、 border-block-start または border-block-end を使用します。 縦書きになれば右または左のみの表示になります。
border-block プロパティについて
border-block プロパティは、「縦書き」や「横書き」を指定する writing-mode プロパティとの組み合わせが有用です。
border-block プロパティは writing-mode との組み合わせで、横書きでは上下の枠線に、縦書きでは左右の枠線として表示されます。
border-block プロパティの例です。縦書きと横書きの border （枠線）を指定します。
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-color | CSS Colorを参照 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
border-block プロパティは、border-block-width、border-block-style、border-block-color の値を組み合わせることができます。
ただし、*-style を指定しないと border-block は表示されません。
border-block-style の値
border-block-style で指定できる値には以下があります。
| Value | 摘要 |
|---|---|
| none | 初期値（default値） |
| hidden | 非表示 |
| dotted | ドット点線 |
| dashed | 点線 |
| solid | 実線 |
| double | 二重線 |
| groove | ３D丸みのある隆起した線 |
| ridge | ３D隆起した線 |
| inset | エレメント全体を凹んだ立体にみせる |
| outset | エレメント全体を立体にみせる |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | none |
| 継承（Inherited） | No |
| CSS Animation | Yes |
Example
border-block プロパティの例です。 横書きと縦書き同じ値を指定しています。横書きの場合は高さとして、縦書きの場合は幅として設定されます。
関連する CSS プロパティ
以下のような border-block に関連する CSS プロパティがあります。
| プロパティ名 | 概要 |
|---|---|
| border-inline | 横書きでは左右、縦書きでは上下の border （枠線） |
| block-size | 横書きでは高さ、縦書きでは幅に設定される |
| inline-size | 横書きでは幅、縦書きでは高さに設定される |
| direction | テキストの右寄せ、左寄せ |
| unicode-bidi | |
| text-orientation | 縦書きテキストにおけるフォントの向き |
| writing-mode | テキストの記述方向 |