CSS ボーダーブロックエンド属性

定義と使用方法

border-block-end 属性は以下の属性の短縮形です：

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

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

ブロック方向の端のフレームに幅、色、スタイルを設定します：

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

ブロック方向の端のフレーム位置は、 writing-mode 属性の影響：

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

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

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

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

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

Chrome	Edge	Firefox	Safari	Opera
69.0	79.0	41.0	12.1	56.0