CSS ボーダーブロックスタート属性

定義と用法

border-block-start 属性は以下の属性の省略形です：

CSS border-block-start 属性は border-bottom、border-left、border-right および border-top 属性は非常に似ていますが、 border-block-start この属性はブロック方向に依存しています。

注意：関連する CSS 属性に影響を与えます writing-mode ブロック方向を定義します。これはブロックの開始位置と終了位置、および border-block-start 属性の結果。英語のページでは、インライン方向は左から右、ブロック方向は下に向かっています。

ブロック方向の開始位置のボーダーの幅、色、スタイルを設定します：

div {
  border-block-start: 10px solid pink;
}

ブロック方向の開始位置のボーダーの位置は、 writing-mode 属性の影響：

div {
  writing-mode: vertical-rl;
  border-block-start: dotted blue;
}

border-block-start: border-block-start-width border-block-start-style border-block-start-color|initial|inherit;

値	説明
border-block-start-width	指定された要素がブロック方向の開始位置にあるボーダーの幅を指定します。デフォルト値は medium です。
border-block-start-style	指定された要素がブロック方向の開始位置にあるボーダーのスタイルを指定します。デフォルト値は none です。
border-block-start-color	指定された要素がブロック方向の開始位置にあるボーダーの色を指定します。デフォルト値は、ボーダーの現在の色です。
initial	この属性をデフォルト値に設定します。参照してください： initial。
inherit	親要素からこの属性を継承します。参照してください： inherit。

デフォルト値：	medium none currentcolor
継承性：	いいえ
アニメーション作成：	サポート。参照してください：アニメーション関連属性。
バージョン：	CSS3
JavaScript 文法：	object.style.borderBlockStart="pink dotted 5px"

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome	Edge	Firefox	Safari	Opera
69.0	79.0	41.0	12.1	56.0