CSS ボーダーブロックエンドスタイル属性

定義と用法

border-block-end-style 属性は要素のブロック方向の端の枠線スタイルを設定するために使用されます。

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

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

インスタンス

例1

ブロック方向末端の境界線にスタイルを設定します：

div {
  border-block-end-style: dotted;
}

実際に試してみる

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

ブロック方向末端の境界線スタイルの位置は、 writing-mode 属性の影響：

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

実際に試してみる

CSS 文法

border-block-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

属性値

値 説明
none デフォルト値。境界線なしを指定します。
hidden "none"と同じですが、テーブル要素のエッジ干渉解決において異なります。
dotted ドットラインエッジを指定します。
dashed ダッシュラインエッジを指定します。
solid ソリッドラインエッジを指定します。
double ダブルラインエッジを指定します。
groove

3D グローヴエッジを指定します。

効果は border-color の値によります。
ridge

3D リッジエッジを指定します。

効果は border-color の値によります。
inset

3D インセットエッジを指定します。

効果は border-color の値によります。
outset

3D アウトセットエッジを指定します。

効果は border-color の値によります。
initial この属性をデフォルト値に設定します。参照 initial。
inherit この属性を親要素から継承します。参照 inherit。

技術的詳細

デフォルト値： none
継承性： いいえ
アニメーション作成： no. animatableについて読む
バージョン： CSS3
JavaScript 文法： object.style.borderBlockEndStyle="dotted"

ブラウザのサポート

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

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

関連ページ

チュートリアル：CSS 边框

参考：CSS ボーダー属性

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

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

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

参考：CSS ボーダーボトムスタイル属性

参考：CSS border-left-style 属性

参考：CSS border-right-style 属性

参考：CSS border-top-style 属性

参考：CSS writing-mode 属性