【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: 左下の値;
さくっと画像を角丸にするときに便利ですね。
クラス名を一括指定すれば、まとめて角丸にすることも可能です。
以上になります。
