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

定義と用法

関連するCSS属性が影響されます。 属性は要素がブロック方向の始端に配置される際の枠線のスタイルを設定するために使用されます。

CSS 関連するCSS属性が影響されます。 属性と CSS 属性 border-bottom-styleとborder-bottom-styleとborder-left-style 、 border-right-style および 関連するCSS属性が影響されます。 border-top-style

非常に似ていますが、属性はブロック方向に依存します。 例2：writing-mode属性と組み合わせた場合 注意： 関連するCSS属性が影響されます。 ブロック方向を定義します。これにより、ブロックの開始および終了位置や

border-block-start-style

属性の結果。英語ページでは、インライン方向は左から右、ブロック方向は下に向かいます。

例

writing-mode
  div {
writing-mode: vertical-rl;

border-block-start-style: dotted;

例1

ブロック方向の開始地点のエッジにスタイルを設定します： 例2：writing-mode属性と組み合わせた場合 ブロック方向の開始地点のエッジスタイルの位置は、

writing-mode
  属性の影響：
  div {
writing-mode: vertical-rl;

border-block-start-style: dotted;

}

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

CSS 言語

border-block-start-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit; 属性値
none 値
説明 デフォルト値。エッジを指定しません。
hidden 「none」と同義ですが、テーブル要素のエッジの競合解決では異なります。
dashed ダッシュラインエッジを指定します。
solid ソリッドラインエッジを指定します。
double ダブルラインエッジを指定します。
groove

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

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

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

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

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

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

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

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

技術的詳細

デフォルト値： none
継承性： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 言語： object.style.borderBlockStartStyle="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 属性