CSS

border-top-left-radius is a CSS property used to round the top-left corner of an element, which can be adjusted by specifying a value for the radius of the corner.

border-top-left-radius

　border-top-left-radiusプロパティは、要素の左上隅に対して角を丸めるために使用されます。これは、border-radiusプロパティの一部であり、角を丸めるための 4つの異なるプロパティのうちの 1つです。他の 3つは border-top-right-radius、border-bottom-right-radius、および border-bottom-left-radiusです。

　基本構文は以下の通りです。

CSS

border-top-left-radius: <length> | <percentage> | initial | inherit;

　プロパティ値は、次のいずれかを指定することができます。

<length>: 半径をピクセル、エム、ポイント、インチ、センチメートルなどの単位で指定します。例えば、border-top-left-radius: 10px;は、左上隅の半径が 10ピクセルであることを意味します。
<percentage>: 半径をパーセントで指定します。要素の幅や高さに対するパーセンテージを使用することができます。例えば、border-top-left-radius: 50%;は、左上隅の半径が要素の幅と高さの半分であることを意味します。
initial: プロパティを初期値に設定します。
inherit: プロパティを親要素から継承します。

　また、次のように複数の値を指定することができます。

CSS

border-top-left-radius: <length> <length> | <percentage> <percentage> | <length> <percentage> | <percentage> <length>;

　この場合、最初の値は水平半径を表し、2番目の値は垂直半径を表します。例えば、border-top-left-radius: 10px 20px;は、左上隅の水平半径が 10ピクセル、垂直半径が 20ピクセルであることを意味します。

　このプロパティは、ボックスの角を丸めるために使用されます。たとえば、次のように使用することができます。

CSS

div {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	border-top-left-radius: 10px;
}

　この場合、左上隅の角が 10ピクセルの半径で丸められ、他の 3つの角は直角のままです。

　プロパティにパーセントを指定することもできます。この場合、ボックスのサイズに基づいて角のサイズが決まります。

CSS

div {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	border-top-left-radius: 50%;
}

　この場合、左上隅の角が 50%の半径で丸められます。ボックスのサイズが変更された場合でも、角のサイズは常にボックスのサイズの 50%になります。

　プロパティに 2つの値を指定することで、水平方向と垂直方向の半径を別々に指定することができます。最初の値は水平方向の半径であり、2番目の値は垂直方向の半径です。

CSS

div {
	width: 100px;
	height: 100px;
	border: 2px solid black;
	border-top-left-radius: 10px 20px;
}

　この場合、左上隅の角が水平方向に 10ピクセル、垂直方向に 20ピクセルの半径で丸められます。