CSSで画像の縁を丸める、画像を丸く表示する方法/boder-radiusの使い方（画像編）

名称から枠を丸めるのに使うイメージのあるborder-radiusですが、実は画像を丸めるのにも使えます。

border-radiusの使い方

基本的なborder-radiusの使い方はこんな感じです。

CSSでボーダーの角を丸める・歪める方法/border-radiusプロパティの使い方

borderの角っちょを丸くするborder-radiusの使い方です。実は有機的なデザインを実現する上で、非常に重要なプロパティでもあります。

sunagitsune.com

2019.03.11

さて、borderは画像にもあるわけで、こんな管理人がマウスで適当に描いた絵も……

border-radiusを指定してやればこの通り。

丸くなるという按配です。ここまで250文字ぐらいしか書いてないんですが、書くべきことは基本これで全てです。

<！-- html -->
<img style = "border:1px solid black; border-radius:50%;" src="sg.jpg" alt="sg" />

丸くするには縦横比1:1の画像で

一応補足としまして、長方形の画像は完全な円形にはなりません。

このように楕円形となりますので、元の画像を調整なり、トリミングなりする形でご対応ください。
また、詳しくは上のリンクで説明していますが、楕円形を作ることも可能です。

<！-- html -->
<img style = "border-radius:30% 50% 25% 50%;" src="cat.jpg" alt="cat" />

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27