CodeLog

角を丸くする

CSSで要素の角を丸く設定する方法を解説します。ボックスやボタンなどの要素の角を丸くすることができ柔らかい印象にすることができます。

すべての角を丸くする

要素を角丸に設定するには、border-radiusを設定することで角を丸くすることができます。border-radiusにひとつだけ値を設定すると全ての角が丸くなります。

border-radius: 10px;

border-radiusの値が大きいほど大きな角丸になりますが、要素の高さの半分以上の値を設定してもそれ以上の角丸にはなりません。

部分的に角を丸くする

角丸の設定は部分的にすることもできます。border-radiusの値を4つ指定すると左上・右上・右下・左下の順番で個別に角丸にすることが可能です。左上から時計回りと覚えておくといいかもしれません。

左上の角を丸くする

border-radius: 10px 0px 0px 0px;

上の角を丸くする

border-radius: 10px 10px 0px 0px;

下の角を丸くする

border-radius: 0px 0px 10px 10px;

右上・左下の角を丸くする

border-radius: 0px 10px 0px 10px;

要素の側面を半円にする

border-radiusの値を要素の高さの半分に設定することで、要素の側面を半円に表現することができます。半分以上の値を設定してもそれ以上にはなりません。

.class{
	height: 50px;
	border-radius: 25px;
}

丸い要素を作る

角丸の設定を応用することで、丸い要素を作ることができます。高さと横幅が同じ要素に角丸の設定を入れることで丸い要素を作れます。ボタンやアイコンなどに使えそうですね。

.class{
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

ちなみに、border-radiusの値をパーセントで指定した場合、要素の横幅に対しての割合になります。高さに対する割合ではありませんのご注意ください。