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

spiral IT

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

Advertisements

border-radiusの使い方

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

角を丸める
border-radius: 値;
CSSでボーダーの角を丸める・歪める方法/border-radiusプロパティの使い方
borderの角っちょを丸くするborder-radiusの使い方です。実は有機的なデザインを実現する上で、非常に重要なプロパティでもあります。

さて、borderは画像にもあるわけで、こんな管理人がマウスで適当に描いた絵も……
sg
border-radiusを指定してやればこの通り。
sg
丸くなるという按配です。ここまで250文字ぐらいしか書いてないんですが、書くべきことは基本これで全てです。

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

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

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

<!-- html -->
<img style = "border-radius:30% 50% 25% 50%;" src="cat.jpg" alt="cat" />
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント