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

border-end-start-radiusプロパティは、要素のブロック軸の終端側、かつインライン軸の開始側にある角の丸みの半径を保持するプロパティです。このプロパティはCSSの論理プロパティの一つであり、物理的な方向（例：上、下、左、右）に依存しない形で、要素の角の丸みを指定します。

従来のCSSプロパティでは、border-bottom-left-radius のように物理的な位置で角を指定していましたが、border-end-start-radius は要素の書字方向（writing-mode や direction プロパティ）に応じて適用される物理的な角が動的に決定されます。例えば、テキストが左から右へ流れる言語（L-R）では「左下」の角に、右から左へ流れる言語（R-L）では「右下」の角に、縦書き言語では「右上」や「左下」など、writing-mode の設定に応じて適用される角の位置が変化します。

このプロパティは、単一の値で水平方向と垂直方向の半径を同じに設定するか、またはスペースで区切られた2つの値でそれぞれ指定することができます。例えば、「10px」と指定すると、水平・垂直ともに10ピクセルの丸みになります。「10px 20px」と指定すると、水平方向に10ピクセル、垂直方向に20ピクセルの丸みが適用されます。これにより、要素の角を柔軟に丸めることが可能です。

国際化されたWebサイトや、異なる書字方向に対応するWebサイトを構築する際に、物理的なプロパティを直接使うと、書字方向が変わるたびにCSSを書き換える必要が生じます。しかし、border-end-start-radius のような論理プロパティを使用することで、書字方向が変わっても適切な角が自動的に丸められるため、より保守性が高く、柔軟なスタイル定義が可能となります。これにより、初心者の方でも多言語対応のWebページを効率的に作成できます。

Copy
1div {
2  border-end-start-radius: 10px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません