画像の角丸
画像を角丸長方形または正円に切り抜き、本物の透過つきPNGで書き出し — アバター、アプリのスクリーンショット、スライドに。
画像の角丸はキャンバスを使ってブラウザー内で完結します。画像は端末内で処理され、アップロードされることはありません。
画像切り抜きを開く
画像の角丸 について
画像の角丸は、CSSのborder-radiusがすることをファイルに焼き込みます。CSSが届かないあらゆる場所のためです：スライド資料、ドキュメント、チャットアプリ、マーケットプレイス、アプリストアのスクリーンショット。画像をドロップし、控えめからピル型までのプリセットを選ぶか半径スライダーを動かします。半径は短辺のパーセントとして働き、角のペアは重なる代わりに一緒に縮みます — ブラウザーがborder-radiusを解決するのと全く同じ方式です。円形モードは先に中央の正方形に切り、それから完全な円に抜きます — アバター作成が1ステップで完了。書き出しは角が本当に透明なPNGです。
機能
- 短辺の0〜50%の半径スライダー
- プリセット：控えめ・中・丸め・正円
- CSS方式の重なり解決 — つぶれた角なし
- 中央の正方形を自動で切る円形モード
- 書き出したPNGは本物のアルファ透過
- 市松模様の背景でプレビュー
画像の角丸 の使い方
- 画像をドロップまたはクリックで選択
- プリセットを選ぶか半径スライダーを調整
- アバターには円形モードに切り替え
- 透過PNGをダウンロード
例
入力
1200×800 screenshot · radius 10%
出力
PNG with 80 px rounded corners and transparent outside
短辺800 pxの10% — CSSのborder-radiusと同じ計算です。
よくあるエラーとトラブルシューティング
- 別のアプリで角が白く表示される。 — 透過は本物です — 一部のアプリは貼り付け時にPNGを白背景に合成します。画像データの貼り付けではなくファイルの挿入を使ってください。
- 円形切り抜きで被写体が欠けた。 — 円形モードは中央の正方形で切ります。先に被写体が中央に来るよう切り抜いておきましょう — 人物写真の顔がフレームの正中央にあることは稀です。
- 50%にしても円ではなくピル型になる。 — 正方形でない画像では、短辺の50%は両端を半円に丸めます — ピル型です。円にしたいなら先に正方形へ切る円形モードを使ってください。
よくある質問
- デザインソフトなしで角丸を付けるには？
- ここに画像をドロップし、スライダーを動かし、PNGをダウンロードするだけです。角丸は透明な角としてファイル自体に切り込まれるので、どんな貼り付け先でも機能します。
- パーセント半径とborder-radiusの関係は？
- 設計上、完全に同じです：パーセントは短辺に適用され、1辺の2つの半径が重なりそうなときは両方が比例して縮みます — ブラウザーと同じ解決規則です。
- 長方形の写真から円形のプロフィール画像を作れますか？
- はい — 円形モードが最大の中央正方形を切り、1ステップで円に抜きます。結果は透過PNGです。
- 角丸で画質は落ちますか？
- いいえ。形の内側のピクセルはそのままコピーされ、角だけが透明になります。出力はロスレスのPNGなので再圧縮もありません。
関連ツール
すべての ArrayKit ツール