CSS ボーダーブロック幅属性

定義と使用法

border-block-width 属性で設定する要素のブロック方向の枠線の幅を設定します。

注意：以下のように使うと、 border-block-width 属性が効果を発揮するには、設定する必要があります： border-block-style。

border-block-width 属性の値はさまざまな方法で設定できます：

ブロックの終了位置のボーダーの幅が 50px の場合 border-block-width 属性には二つの値があります：

border-block-width: 10px 50px;

ブロックの終了位置のボーダーの幅が 50px の場合 border-block-width 属性には 1 つの値があります：

border-block-width: 10px;

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

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

ブロック方向のボーダーの幅を設定します：

#example1 {
  border-block-style: solid;
  border-block-width: 10px;
}
#example2 {
  border-block-style: solid;
  border-block-width: thin thick;
}

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

div {
  border-block-style: solid;
  writing-mode: vertical-rl;
  border-block-width: 5px;
}

border-block-width: medium|thin|thick|length|initial|inherit;

値	説明
medium	中程度のボーダーを指定します。デフォルト値。
thin	細いボーダーを指定します。
thick	粗いボーダーを指定します。
length	あなたがボーダーの厚みを定義できるようにします。参照してください：CSS 単位。
initial	この属性をデフォルト値に設定します。参照してください initial。
inherit	親要素からこの属性を継承します。参照してください inherit。

デフォルト値：	medium
継承性：	いいえ
アニメーション作成：	サポート。参照してください：アニメーション関連属性。
バージョン：	CSS3
JavaScript 言語：	object.style.borderBlockWidth="3px 10px"

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

Chrome	Edge	Firefox	Safari	Opera
87.0	87.0	66.0	14.1	73.0