スクエア画像

角丸にする

このブラウザ内で画像の角を丸くします。角は塗りつぶすのではなく切り抜くので、PNG と WebP では透明のまま残ります。ファイルはアップロードされません。

要点

SquareImage.dev の Rounded Corners は、画像を角丸の長方形でマスクし、四隅を塗りつぶすのではなく消去します。そのため PNG または WebP で書き出せば、その部分は透明のまま残ります。半径のスライダーはピクセル値ではなく短辺に対する割合で、8〜16% でアプリアイコンの角のような見た目に、100% で正方形が円になります。保存されるファイルは元のピクセル寸法を保ち、1 つの半径が四隅すべてに適用されます。JPEG で書き出すと角は白く塗りつぶされます。JPEG にはアルファチャンネルがないためです。無料でアカウント登録は不要、マスク処理は端末上の Canvas で実行されます。

By · Verified

画像の角を丸くするには？

  1. 画像を追加する。クリック、ドラッグ、または貼り付けます。
  2. 半径を設定する。スライダーは短辺に対する割合で動きます。
  3. 形式を選ぶ。角を透明にするなら PNG か WebP です。
  4. ダウンロードする。元のピクセル寸法は保たれます。

なぜ半径がピクセルではなく割合なの？

割合ならどのサイズでも同じ見た目になります。12% は 512 ピクセルのアイコンでも 2048 ピクセルの書き出しでも同じ印象になりますが、固定のピクセル値では大きい画像でほとんど目立たなくなります。

目安として、8〜16% がアプリアイコンの角、100% で正方形が円になります。

JPEG だと角が白くなるのはなぜ？

JPEG にはアルファチャンネルがなく、透明度を保存できません。そのため切り抜いた角は書き出し時に白で塗りつぶされます。これは形式の仕様であり、ツールの不具合ではありません。

角を透明にしたい場合は PNG または WebP で書き出してください。

写真はサーバーにアップロードされますか？

いいえ。マスク処理はブラウザ内の Canvas で実行され、ファイルは当サイトのサーバーに送信されません。半径は四隅すべてに同じ値が適用されます。

よくある質問

角は本当に透明になりますか？

PNG と WebP なら透明です。消去されるのであって塗りつぶされません。JPEG では形式が透明度に対応していないため白くなります。

画像のサイズは変わりますか？

いいえ。保存されるファイルは元のピクセル寸法を保ちます。

一部の角だけ丸くできますか？

いいえ。同じ半径が四隅すべてに適用されます。

このサイトのツールはすべて、写真を HTML canvas に描画し、その結果を読み出します。処理はそれだけです。だからアップロードは発生しません。ブラウザ自身のドキュメントは描画処理をこう説明しています:

“drawImage() will always use the source element's intrinsic size in CSS pixels when drawing, cropping, and/or scaling.”
— MDN Web Docs, CanvasRenderingContext2D: drawImage() method

出典

リンク確認日: 2026-09-03

このサイトの他の画像ツール