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

border-end-end-radiusプロパティは、CSS要素のブロック方向の終わり側、かつインライン方向の終わり側の角の丸みを設定するためのプロパティです。このプロパティは、物理的な位置（例えば「右上」や「左下」など）を直接指定する従来のborder-top-right-radiusのようなプロパティとは異なり、文書の書字モードや方向（writing-mode、direction、text-orientation）に基づいて角の位置が論理的に決定される点が大きな特徴です。

具体的には、例えば日本語や英語のような左から右へ書く言語環境（direction: ltr）では、このプロパティは要素の右下隅の角の丸みを調整します。しかし、アラビア語やヘブライ語のような右から左へ書く言語環境（direction: rtl）では、要素の左下隅の角の丸みを調整することになります。さらに、縦書きの書字モード（writing-mode: vertical-rlなど）が適用されている場合には、物理的な位置がさらに変化し、例えば右上の角に相当する位置に影響を与えることになります。

このプロパティに指定する値は、CSSの長さ単位（px、em、remなど）やパーセンテージです。一つの値を指定すると、水平方向と垂直方向の半径が同じ値になります。二つの値を指定した場合は、一つ目の値が水平方向の半径、二つ目の値が垂直方向の半径として適用されます。border-end-end-radiusは、国際化に対応したWebサイトやアプリケーションを構築する際に、どのような書字モードや言語方向であっても一貫したUIデザインを維持するために非常に有用なプロパティです。これにより、開発者は物理的な角の位置を意識することなく、論理的な位置で柔軟にデザインを調整できます。

Copy
1border-end-end-radius: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません