【HTML&CSS】画像をアイコンみたいに丸くする方法！

どうも皆さんこんにちは！kwです！

今回は、画像（img）をアイコンみたいに丸くする方法を解説していきます！

これを覚えると、自分のプロフィールサイトなどを作る際にもデザインの幅が広がるようなとても便利なこともできてしまうので是非習得してみてください！

画像をアイコンみたいに丸くするにはborder-radiusというプロパティを使います。

どうやって使うかといいますと、画像に対してCSSの方からborder-radius:50%;と適用するだけです。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

※わかりやすくするためにborder（線）をつけています。

このようにborder-radiusプロパティを使うと、画像のかどに丸みをつけることができます。

今回はborder-radius:50%;としましたが、10%,20%...などでも角に丸みをつけることができます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

このようにborder-rasiusプロパティを使うと、画像にどのくらい丸みをつけるかを指定することができます。

他にも、文字の周りのborder（線）にも丸みをつけることなどもできてしまいます。

こんな感じです↓

See the Pen Untitled by kw (@kw-webd) on CodePen.

これは30%でやっていますが、もちろんほかの値でも適用することができます。

今回は画像をアイコンみたいに丸くする方法について解説しました。

border-radiusを覚えておくとデザインの幅がとても広がるので皆さんも覚えてみてはいかがでしょうか？