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

border-top-right-radiusプロパティは、HTML要素の右上角の丸み（角丸）の半径を指定する値を保持するプロパティです。このプロパティを使用することで、Webページの視覚的なデザインを柔軟に制御し、要素の右上隅を円形または楕円形に整形することが可能になります。

設定できる値は、px（ピクセル）、em（エム）、rem（レム）といったCSSの長さの単位、または要素の幅や高さに対する相対的なパーセンテージ（%）です。

一つの値を指定した場合、その値が水平方向と垂直方向の両方の半径に適用され、円形の角が作成されます。例えば、border-top-right-radius: 10px;と指定すると、右上角は半径10pxの円で丸められます。

二つの値を指定する場合、最初の値が水平方向の半径、二番目の値が垂直方向の半径として適用され、楕円形の角を作成できます。例えば、border-top-right-radius: 10px 20px;と指定すると、水平方向に10px、垂直方向に20pxの楕円で右上角が丸められます。

値に0を指定すると、角は直角のままで丸みは適用されません。このプロパティによって定義される角丸は、要素の背景およびボーダーに影響を与えます。

同様に、要素の他の角を個別に指定するためのborder-top-left-radius、border-bottom-left-radius、border-bottom-right-radiusプロパティも存在します。また、これら全ての角の丸みをまとめて指定できるショートハンドプロパティborder-radiusも利用できます。このプロパティを適切に使うことで、モダンで魅力的なWebデザインを実現できます。

Copy
1border-top-right-radius: 10px;

引数なし

引数はありません

戻り値なし

戻り値はありません