CSSで画像の四隅を丸くする方法

CSS（スタイルシート）を使えば画像の四隅を丸くするのは簡単にできます。

ブログのプロフィール画像や記事一覧のアイキャッチ画像などで丸い画像が出ているものがありますが、それもCSS（スタイルシート）で実現できます。

画像の四隅を丸くする方法

画像の四隅を丸くする方法はCSSの「border-radius」プロパティを利用します。

四隅を同じ大きさで角丸にしたい場合は「border-radius:四隅の大きさ」でＯＫです。

具体的にはCSSで

要素名 {
border-radius: 20px 30px 40px 50px;
}

といったような指定を行い

<img src="画像のURL" />

と書くと画像の四隅が指定した大きさで角丸になります。

また「border-radius」の代わりに

を使えば四隅を１つだけ指定して角丸にすることができます。

まとめ

CSS（スタイルシート）で画像の四隅を角丸にするには「border-radius」を使えば簡単に実現することができます。

以上、「CSSで画像の四隅を丸くする方法」でした。