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