CSS

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

投稿日:

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で画像の四隅を丸くする方法」でした。

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-CSS
-

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