編集

画像を角丸にする

白い四角でごまかさない、本当に透明な角丸。

編集

☞ すべてブラウザ内で処理 — アップロードは一切ありません

画像をここにドロップ

クリックして選択も可 —— PNG・JPG・WebP・GIF

ピクセルではなく割合

ピクセル指定の半径は単位を間違えている

半径 40 ピクセルは 4000 ピクセルの写真ではまったく見えず、400 ピクセルのアイコンでは顔が半分削れます。だからここでの半径は短辺に対する割合です。ひとつの設定がサムネイルでもポスターでも同じ見た目になります。換算後のピクセル値は下に表示されるので、数値指定の仕様に合わせることもできます。

もう半分の仕事は書き出し形式です。角丸には透明が要りますが、JPEG に透明はありません。角丸の画像を JPEG で保存すると、何かで埋めない限り四隅は真っ黒になります。このツールの既定は PNG で四隅を本当に空にし、JPEG を選んだ場合は黙って黒い三角を作る代わりに背景色を尋ねます。

3 ステップ

画像を角丸にする手順

01

画像をドロップ

PNG / JPG / WebP / GIF に対応。ページ内でデコードされ、アップロードはされません。

02

半径を決める

スライダーを短辺の 0〜50% で動かします。正方形の画像なら 50% でちょうど円になります。枠線が要るなら同じパネルで追加できます。

03

ダウンロード

PNG は四隅を透明のまま保持します。JPEG と WebP もあり、角丸で欠けた部分は選んだ背景色で埋まります。

早わかり

角丸のよくある質問

四隅は本当に透明ですか?

PNG と WebP では本当に透明です。角丸のパスの外側はアルファ 0 になります。JPEG では不可能です。形式そのものにアルファチャンネルがないため、背景色を選んでもらい、その色で四隅を埋めます。

なぜ半径が割合なのですか?

ピクセル指定の半径はひとつのサイズでしか意味を持たないからです。10% は 400 ピクセルでも 4000 ピクセルでも同じに見えますが、40 ピクセルは一方では円、もう一方ではほぼ無に見えます。換算値はプレビューの下に出ます。

完全な円にできますか?

正方形の画像なら半径を 50% にしてください。長方形だとカプセル型になります。その場合は先に正方形へ切り出す「円形切り抜き」をお使いください。

枠線もつけられますか?

はい。枠線は角丸の外側に同じ曲線で乗り、内側の半径は枠幅ぶん小さくなるので二つの弧は同心のままです。角丸だけが欲しいときは枠線を 0% にしてください。

とても大きな画像は?

ブラウザにはキャンバス面積の上限があります。結果が上限を超える場合は収まるように縮小し、その旨をプレビューに表示します。空のファイルを渡すことはありません。

アップロードされますか?

いいえ。画像はあなたのブラウザ内でデコード・描画・再エンコードされます。どの時点でもサーバーへは何も送られません。