画像を角丸にしてオシャレ度UPするCSS

更新日：2017年7月30日

あまり手間暇掛けず、勿論フォトショップも使わずに画像にオシャレな効果をつける方法をご紹介。CSSのみで実装出来ちゃいます。今回は画像を角丸にしてオシャレ度UPするCSSのご紹介です。
画像に影をつけてオシャレ度UPするCSSを紹介しましたが、その続編になります。

今回も簡単コピペで実装可能ですので、是非お試し下さい。

実装すると下記のような感じになります。

まずHTMLですが、例えば以下のように記述します。

classをちゃんと指定してあげてればいいだけです。
それだけでOK。

次にCSSには以下のように記述します。

.effect {
	border-radius: 10px;
}

このCSSで画像の角を丸くしています。
数値を大きくすればする程、角が丸くなります。私は10pxくらいが好きですが、この辺りは完全にお好みなので自由に数値を変更して下さい。

これにて完成。
本当にCSSはお手軽で便利ですねー。是非お試し下さい。