画像加工なしで画像を角丸にする方法をご紹介！

今回は画像加工なしで画像を角丸にする方法をご紹介したいと思います！

デモ

CSSだけで画像加工なしで角丸加工ができました！

CSS

楽天

<style>
img{
border-radius:16px;
}
</style>

画像すべて角丸になります。
px数を大きくするほど丸くなります。

ヤフー

<img src="画像URL" style="border-radius:16px;">

ヤフーの場合はimgタグに直接CSSを書き込みます。
画像単体に指定されます。

ogariaツールに反映

アイコンみたくて可愛い印象になりますね！

<script>
<!--
//なんでも商品ランキングの商品画像を角丸にする
$(function(){
	checkDOM({
		url:"http://www.rakuten.ne.jp/gold/otbj/ogaria/show_item/index.html?id=31",
		selecter:".item"
	},function(p,d){
		d.closest("body").append("<style>.item_image img {border-radius:16px;}</style>");
	});
});
-->
</script>

詳しい設定方法はこちらから