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

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 との組み合わせが有用です。

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

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

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

 下側、または左側の枠線の指定は border-block-end プロパティを使用します。

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

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

備考(Remarks)

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

Example

 border-block-start プロパティの例です。 横書きと縦書きに同じ値を指定しています。横書きでは上線、縦書きでは右線として表示されます。