【border-radius】CSSで画像を角丸にする方法【画像加工なし】

投稿のサムネイルや、ページに挿入した画像の元データは正方形だけど、角丸で表示したい!ということはありませんか?
もちろん、元データの段階でPhotoshop等の画像加工アプリケーションを使って角丸に加工してからアップロードしてもいいですが、
角丸にすることで、JPGではなく、角部分が半透明な、サイズが大きめになるPNGファイルで書き出ししなくちゃいけなかったり、
そもそも、加工がめんどくさいですよね。

そういう時に簡単に後からCSS指定するだけで角丸にする方法を解説します。

HTML

imgにクラス名を指定します。(任意)

<img class="kadomaru" src="" alt="">

CSS

/*適用例*/
.kadomaru {
border-radius:20px;
}

/*4つの値で指定する方法*/
border-radius:要素の左上 要素の右上 要素の右下 要素の左下;

/*2つの値で指定する方法*/
border-radius:要素の左上と右下 要素の右上と左下;

/*1つの値で指定する方法*/
border-radius:4つの角度を一度に指定;

/*個別に指定*/
border-top-left-radius: 左上の値;
border-top-right-radius: 右上の値;
border-bottom-right-radius: 右下の値;
border-bottom-left-radius: 左下の値;

さくっと画像を角丸にするときに便利ですね。
クラス名を一括指定すれば、まとめて角丸にすることも可能です。

以上になります。