CSS ボーダーブロック属性

定義および使用方法

border-block 属性は以下の属性のショートカットです：

• border-block-width
• border-block-style（必須）
• border-block-color

色や幅の値を省略すると、デフォルト値が使用されます。

CSS border-block 属性は border 属性は非常に似ていますが、 border-block 属性はブロック方向に依存しています。

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

インスタンス

例 1

ブロック方向上の異なる要素の枠線のスタイル、色、幅を設定します：

h1 {
  border-block: 5px solid red;
}
h2 {
  border-block: 4px dotted blue;
}
div {
  border-block: double;
}

実際に試してみてください

例 2：writing-mode 属性の組み合わせ

ブロック方向上の開始および終了枠線の場所は、 writing-mode 属性の影響：

div {
  writing-mode: vertical-rl;
  border-block: hotpink dashed 8px;
}

実際に試してみてください

CSS 文法

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

属性値

技術的詳細

ブラウザのサポート

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

相关页面

教程：CSS 边框

参考：CSS ボーダー属性

参考：CSS ボーダーブロックカラー属性

参考：CSS ボーダーブロックスタイル属性

参考：CSS ボーダーブロック幅属性

参考：CSS writing-mode 属性