左坊のメモ帳

WordPress など

*

画像を角丸にするCSS「border-radius」

      2018/08/14

画像を加工しなくてもCSSだけで角丸に表示できます

スポンサーリンク

角丸にするcss「border-radius」

border-radiusを使います。

どのhtmlタグに使えるかと言うと、border-collapseの値にcollapseが指定されたtable以外、どれでも指定できるので、画像以外でも背景などを角丸にすることもできます。

値の指定方法は、左上から時計回り(左上、右上、右下、左下)で、水平方向の半径/垂直方向の半径という表記で記述します。(省略可)

border-radius:100px 50px 60px 30px/70px 80px 60px 40px;

画像を角丸にするコード

<img src="画像ファイル" style="border-radius:50px;"/>

画像の大きさにかかわらず真ん丸にする

<img src="画像ファイル" style="border-radius:50%;"/>

値はパーセントで指定することもできます。
ヨコ、タテそれぞれの何%か、という指定になりますので、正方形の画像に対してborder-radius:50%で指定すると真ん丸(正円)になります。

両端を丸型にするコード

<img src="画像ファイル" style="border-radius:7%/50%;"/>

垂直方向を50%にして、水平方向は画像の長方形具合によって適宜指定します。

 - CSS・html