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

使う場面で言うと、ボタンの角を丸めたい時などに使います。

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

やり方

角を丸めたい要素に対して、border-radius: 〇〇px;と指定します。

border-radius: 20px;と指定してみます。

すると

このようにボタンの角を丸めて表示することができました。

続いて、正円にしたい時のやり方を紹介します。

まずは縦と横の長さを揃えます。

その後

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

すると

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