今回の記事では要素の角を丸くするやり方を紹介いたします。

角を丸くすることで見た目に変化をつけたり、正円にすることもできます。

何も指定していない通常の状態から見ていきます。

続いて角を丸くした場合を紹介します。

やり方

border-radius: 〇〇;と指定します。

〇〇のところに数値を指定します。

border-radius: 30px;と指定します。

すると

このように角を丸くすることができます。

正円にする場合

border-radius: 50%;と指定します。

すると

このように正円にすることができます。