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

border-inline-styleプロパティは、要素のインライン方向の境界線（ボーダー）のスタイルを保持するプロパティです。このプロパティを使用することで、要素のテキストが書かれる方向に沿った境界線の種類を設定できます。具体的には、日本語のような横書きの文書では左右の境界線に、アラビア語のような右から左へ書く言語では右と左の境界線に、縦書きの文書では上下の境界線に適用されます。

この「インライン方向」は、CSSのwriting-modeやdirectionプロパティによって定義される論理的な方向を指します。そのため、border-left-styleやborder-right-styleといった物理的な方向を指定するプロパティとは異なり、文書の書き込みモードやテキストの向きが変わっても、常にテキストフローに沿った適切な位置にスタイルが適用されます。これにより、国際化されたWebサイトや多言語コンテンツにおいて、柔軟かつ一貫性のあるデザインを、記述を増やすことなく実現できるようになります。

設定可能な値としては、none（境界線なし）、hidden（非表示）、dotted（点線）、dashed（破線）、solid（実線）、double（二重線）、groove（浮き出し線）、ridge（彫り込み線）、inset（埋め込み線）、outset（浮き出し線）などがあります。これらの値を指定することで、境界線の視覚的な表現を細かく制御することが可能です。border-inline-styleは、よりセマンティックで保守性の高いCSSを記述するための重要なツールの一つと言えます。

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

引数なし

引数はありません

戻り値なし

戻り値はありません