• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2022年3月31日

特定の画像の角を丸くしたい時に使うcss「border-radius」で一部だけ角丸にするコードの例文

border-collapseの値にcollapseが指定されたtable以外、どれでも指定できるので、画像以外でも背景などを角丸にすることもできます。

値の指定方法は、左上から時計回り(左上、右上、右下、左下)で、水平方向の半径/垂直方向の半径という表記で記述します。(一部省略もできます)

 border-radius:100px 50px 60px 30px/70px 80px 60px 40px;

もちろん、emや%で指定もできます。

文字だとイメージしずらいので以下の例文と画像を確認してください。

一括やたくさん指定したい時はCSSファイルに

一括で指定したい時はCSSファイルにこのように書いてください
img{
border-radius: 1em;
}

元画像

指定なし

スポンサーリンク

CSS設定の例:画像を角丸

<img src=”画像ファイル” style=”border-radius:50px;”/>

CSS設定の例:画像の大きさにかかわらず丸

<img src=”画像ファイル” style=”border-radius:50%;” width=”125px” height=”125px”/>

コメントを残す