こんにちは、WEBデザイナーのねこふらいです。

CSSでボタンをレイアウトしようと思った時、角を丸くしたいなと思ったことはありませんか? 私はよくあります。

個人的な話になりますが、丸みのある柔らかなデザインが好きなんですよ。


ということで、今回はCSSで簡単に角丸を表現する方法について見ていきます。

border-radiusを使って角丸を表現

ボタン

上記のようなボタンに角丸をつけたい場合、border-radiusを使用します。

ボタン

するとこのように角丸が表現できました!

コードは以下のとおりです(ボタンのレイアウトは含めていません)。



.button{
 border-radius: 8px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}


border-radiusを使うと簡単に角丸を実装できるので、ぜひ使ってみてくださいね!



HOME > コーディング > CSSで角丸を表現する方法