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

border-start-end-radiusプロパティは、CSSにおいて、要素の境界線における特定の角の丸みの半径に関する設定を保持するプロパティです。このプロパティは、物理的な位置（例えば「右上」や「左下」）に固定されたborder-top-right-radiusのようなプロパティとは異なり、文書の書き込みモードや方向性に基づいて動的に位置が決定される「論理プロパティ」に分類されます。

具体的には、要素のコンテンツの「開始行」と「終了側」が交わる角に丸みを適用する設定を定義します。例えば、日本語のように左から右へ文字を書く（direction: ltr）モードの場合、この設定は物理的な右上隅の角の丸みに対応します。一方、アラビア語のように右から左へ文字を書く（direction: rtl）モードの場合には、物理的な左上隅の角の丸みに対応するよう変化します。このように、このプロパティはユーザーの言語設定やレイアウトの方向性に合わせて適用される角を調整するため、多言語対応サイトなどでデザインの一貫性を保ちやすくなります。

このプロパティに与える値は、単一の値を指定することで水平方向と垂直方向の両方に同じ半径を適用するか、または2つの値を指定することでそれぞれ水平方向と垂直方向の半径を個別に設定できます。これらの値は、ピクセル（px）、em、remなどの長さの単位、またはパーセンテージで指定することが可能です。国際化に対応したWebアプリケーションを開発する際に、柔軟なデザインを実現するためにこのプロパティは非常に役立ちます。

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

引数なし

引数はありません

戻り値なし

戻り値はありません