簡単に円を実装する方法(aspect-ratio)

CSSで円を実装する方法はたくさんありますが、aspect-ratioを使用する方法が間違いなくもっとも最小限の方法です。

aspect-ratioは、アスペクト比を設定できるCSSのプロパティです。aspect-ratio: 1;は1:1のアスペクト比になり、幅と高さが1:1で描画されます。これにborder-radius: 50%;で正円になります。

#en {
	inline-size: 25ch;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 1px solid #000;
}