CSSだけで画像を丸くする方法

2018/05/17スタイルシートCSS

記事内に広告が含まれています。

CSS(スタイルシート)の設定だけで四角の画像を丸い画像に変えます。

CSSだけで画像を丸くする方法

CSSだけで四角い画像に丸みを持たせるには「border-radius」プロパティを使います。


    border-radius: 150px;
    height: 300px;
    width: 300px;

上記の例でいうと画像の大きさの半分の値(150px)を「border-radius」に指定すると丸くなります。

<<元の画像>>

<<画像の半分の大きさを指定した画像>>

<<画像の半分より小さな大きさを指定した画像>>
半分より小さな値を指定すると角ばった画像になります。(100pxを指定)

以上、CSSだけで画像を丸くする方法でした。

システムトラストでは一緒に働いていただける仲間を募集中です。
株式会社システムトラスト

システムトラストでは、システムエンジニア、プログラマーなどを随時募集中です。気軽にご相談ください。

お問合せ