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

border-start-start-radiusプロパティは、要素の論理的な「開始側」かつ「開始側」の角の丸み（角丸）を定義するための値を保持するプロパティです。このプロパティはCSS Logical Properties and Valuesモジュールで定義されており、Webコンテンツの国際化やアクセシビリティを向上させる目的で使用されます。

従来のborder-top-left-radiusなどの物理的なプロパティとは異なり、border-start-start-radiusは、ドキュメントの書字方向（writing-modeやdirectionプロパティによって定義されるテキストの流れ）に基づいて角の位置を決定します。具体的には、テキストブロックが並ぶ方向（ブロック軸）の開始側と、テキストの文字が並ぶ方向（インライン軸）の開始側が交わる角を指します。

例えば、多くのWebページで採用されている左から右へ、上から下へという書字方向の場合、このプロパティは物理的な左上の角に適用されます。しかし、書字方向が右から左へ変更された場合、物理的な右上隅に適用されることになります。また、縦書きが設定された場合は、物理的な左下隅や右下隅といった場所に適用されることもあります。

値は、1つまたは2つの長さ（px、emなど）またはパーセンテージで指定します。1つの値を指定すると、水平方向と垂直方向の半径が同じになり、円形の角丸が形成されます。2つの値を指定した場合は、最初の値が水平方向の半径、2番目の値が垂直方向の半径として解釈され、楕円形の角丸を表現できます。このプロパティを活用することで、多言語対応のWebサイトなどで、書字方向が変わってもデザインの一貫性を保ちやすくなります。

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

引数なし

引数はありません

戻り値なし

戻り値はありません