CSS

CSSで画像の四隅を丸くする方法

投稿日:2018/06/22 更新日:

CSS(スタイルシート)を使えば画像の四隅を丸くするのは簡単にできます。

ブログのプロフィール画像や記事一覧のアイキャッチ画像などで丸い画像が出ているものがありますが、それもCSS(スタイルシート)で実現できます。

画像の四隅を丸くする方法

画像の四隅を丸くする方法はCSSの「border-radius」プロパティを利用します。

border-radiusプロパティの使い方

border-radius : [左上角] [右上角] [左下角] [右下角]

四隅を同じ大きさで角丸にしたい場合は「border-radius:四隅の大きさ」でOKです。

具体的にはCSSで

といったような指定を行い

と書くと画像の四隅が指定した大きさで角丸になります。

電脳空間の世界を飛び回る女性

また「border-radius」の代わりに

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius

を使えば四隅を1つだけ指定して角丸にすることができます。

まとめ

CSS(スタイルシート)で画像の四隅を角丸にするには「border-radius」を使えば簡単に実現することができます。

以上、「CSSで画像の四隅を丸くする方法」でした。




-CSS
-

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.