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

border-inline-end-styleプロパティは、CSSの論理プロパティの一つとして、要素のインライン方向の末尾に表示される境界線のスタイルを保持するプロパティです。このプロパティは、テキストの書き込み方向（writing-modeプロパティ）やテキストの方向（directionプロパティ）に依存して、物理的などの辺に境界線が適用されるかが動的に変わる点が特徴です。例えば、英語のように左から右へ記述する言語では要素の右側の境界線にスタイルが適用され、アラビア語のように右から左へ記述する言語では要素の左側の境界線にスタイルが適用されます。これにより、国際化対応が必要なウェブサイトや、異なる書き込みモードを持つコンテンツを扱う際に、常にコンテンツの流れに沿って適切な位置に境界線を一貫して表示できます。

設定できる値としては、主に境界線の種類を指定します。境界線を全く表示しないnoneやhidden、点線を表すdotted、破線を表すdashed、実線を表すsolid、二重線を表すdoubleなどがあります。その他にも、立体的な見た目を表現するためのgroove（溝）、ridge（隆起）、inset（へこみ）、outset（浮き出し）といった値も利用可能です。これらの値を適用することで、要素の視覚的な境界を豊かに表現することができます。

このプロパティは、border-inline-endというショートハンドプロパティの一部でもあり、境界線の幅（border-inline-end-width）や色（border-inline-end-color）と組み合わせて一括で指定することも可能です。物理プロパティとは異なり、コンテンツの流れに基づいて自動的に位置を調整するため、柔軟なレイアウト設計に役立ちます。

Copy
1selector {
2  border-inline-end-style: solid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません