【CSS Modules】border-block-end-styleプロパティの使い方

border-block-end-styleプロパティは、要素のブロック軸の終わり側のボーダーラインのスタイルを定義するために使用されます。

このプロパティは、要素のブロックフロー方向における論理的な「終わり」側の境界線のスタイルを指定します。CSSにおいて「ブロック軸」とは、テキストブロックが通常流れる方向を指し、その方向はwriting-modeプロパティの設定によって変化します。例えば、一般的なwriting-mode: horizontal-tb（横書き、上から下へ）の場合、ブロック軸の終わり側は要素の下端にあたります。しかし、writing-mode: vertical-rl（縦書き、右から左へ）の場合、ブロック軸の終わり側は要素の左端にあたります。このように、物理的な方向ではなく、コンテンツのフローに基づいた論理的な方向を指定できるため、国際化対応や異なる言語環境でのレイアウトの柔軟性が高まります。

設定できる値には、none（ボーダーなし）、hidden（非表示）、dotted（点線）、dashed（破線）、solid（実線）、double（二重線）などがあり、これらの値によってボーダーの外観を細かく制御できます。このプロパティを使用することで、コンテンツの書字方向にかかわらず、常にブロック軸の終わり側に一貫したデザインのボーダーを適用できるようになります。これにより、物理的な上下左右の指定に比べて、より汎用的で保守性の高いスタイル定義が可能となります。

Copy
1.element {
2  border-block-end-style: solid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません