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

border-block-end-widthプロパティは、要素のブロック軸の末尾側のボーダー（境界線）の太さを設定するために使用されるプロパティです。このプロパティは、Webページの国際化や多言語対応において非常に重要な役割を果たします。

一般的なCSSのborder-bottom-widthが常に物理的な下側のボーダーの太さを指定するのに対し、border-block-end-widthは書字方向（テキストの書き進める方向）に応じてボーダーの位置が変化します。例えば、日本語や英語のような左から右へ書き進める横書きモード（writing-mode: horizontal-tb）の場合、ブロック軸の末尾は物理的な下側になるため、border-bottom-widthと同じ効果を持ちます。しかし、日本語の縦書きモード（writing-mode: vertical-rl）の場合、ブロック軸の末尾は物理的な右側になるため、このプロパティは右側のボーダーの太さを制御します。このように、書字方向が変更されても、常にブロックの末尾側のボーダーとして機能するため、異なる言語環境でも一貫したレイアウトを維持できます。

このプロパティには、thin（細い）、medium（標準）、thick（太い）といったキーワードで太さを指定できるほか、1px、0.5em、2ptのような具体的な長さの単位で詳細な太さを設定することも可能です。border-block-end-widthは、border-block-end-style（ボーダーのスタイル）やborder-block-end-color（ボーダーの色）と組み合わせて使用することで、ブロック軸の末尾のボーダー全体を細かくデザインできます。また、これら三つのプロパティは、ショートハンドプロパティであるborder-block-endを使用することで、一度にまとめて設定することも可能です。

Copy
1.element {
2  border-block-end-width: 2px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません