purelog.

23歳女のありのままを書きおとすブログ。

img border-radiousで特定の画像の角を丸くする方法

f:id:aita94:20180628094921j:plain

ブログデザインを頻繁にカスタマイズしていじりすぎて誰かわからなくなるアイです。笑
最近というかブログ開設してからずーっとですが、デザインを変えに変えまくっています。
今回は画像の角を丸くする方法を紹介したいと思います。

 

角を丸くした画像の見本とコード

こちら私のプロフィール画像でやってみました。

See the Pen 角丸 by Ai (@aita13) on CodePen.

 

簡単に設定できるコード

  1. <img src="ココに画像URL" width="横のサイズ○○px" height="縦のサイズ○○px" style="border-radius: 20%;">

これで簡単に設定できるかと思います!

border-radiousの数字は小さくすればするほど丸感が少なくなり、大きくなればなるほど角が大きく丸みを帯びます。

border-radiousを50%にすると、まん丸になる

See the Pen 丸プロフ by Ai (@aita13) on CodePen.

いかがでしたでしょうか?

普通はCSSで作ったりしますが、私は面倒なので(それでいいのかはわかりませんが泣)、このような形でしています。
パパっとそれだけを変形させたい方におすすめです。
CSSで指定したい方は以下のサイトをご覧ください!

border-radious解説サイト

CSSでの指定

CSSだけでサムネイルなどの画像を丸く見せる方法 | delaymania

CSSを使ってプロフィールやサムネイルの画像を丸く切り抜く方法 - 32style

border-radiousの詳しい説明

CSS で画像を丸く切り取って表示する方法(めちゃくちゃ詳しい)