圖片圓角

關於 GeekFormat

點擊上傳圖片

JPG / PNG / WEBP

圓角預設

圓角大小

20%

050%

輸出格式

上傳圖片以顯示預覽

線上為圖片加入圓角效果，拖動滑桿即時預覽，支援小、中、大三種預設一鍵選擇，輸出透明 PNG 適合任意背景，本機處理安全無憂。

什麼是圖片圓角處理？

圖片圓角處理是把圖片的 4 個直角替換成平滑弧線的處理技術。本工具透過 Canvas 的 arcTo() 繪製圓角矩形路徑，再呼叫 clip() 將圖片裁剪到圓角區域內：未填充區域在匯出 PNG 時變成 Alpha=0 的透明像素。

**圓角有什麼視覺效果？** 圓角相比直角更柔和、親和，降低尖銳度，在 UI 設計中被廣泛用於 App 圖示、按鈕、卡片、頭像。iOS 推行的「Superellipse（squircle）」更把圓角推到平滑曲線的極致。

**為什麼很多 App 圖示要求圓角？** iOS / iPadOS / macOS Big Sur 之後系統會自動給 App 圖示加圓角遮罩，但若原圖帶白底會導致「白邊」瑕疵。正確做法是先在源圖上輸出帶圓角的 PNG，讓系統不再二次裁剪；本工具就是這種用途。

**像素 vs 百分比：** 像素精確、跨圖難對齊；百分比自適應、不同尺寸結果一致。設計系統一般採用百分比，如 iOS App 圖示的 22.37%、Android Adaptive Icon 的 25%。

**和 CSS border-radius 的區別：** CSS border-radius 是顯示層處理，匯出圖片仍帶直角；本工具生成的是真實帶 Alpha 通道的 PNG，可以貼到任何不支援 CSS 的場景（如 PPT、影片、印刷）。

適用場景

製作社交帳號頭像（LINE、Twitter/X、Instagram、Facebook、Discord 等），一鍵生成正圓頭像
為 App 圖示快速加入圓角（iOS 推薦 22-25%，Android Adaptive Icon 推薦 25%）
電商平台商品主圖加入圓角後更柔和美觀，提升使用者點擊與購買意願
PPT 簡報、影片剪輯、印刷品中需要圓角圖片素材的本機處理
設計系統統一規範時，批量製作相同圓角尺寸的圖示和素材（需逐張處理）

使用方法

點擊上傳區域選擇圖片，或直接將 JPG/PNG/WEBP 圖片拖曳到上傳區
選擇小（10%）、中（25%）、大（50%）預設按鈕一鍵設定圓角，或拖動滑桿自訂像素值（點擊切換百分比/像素單位）
選擇輸出格式：PNG（帶透明背景）/WEBP（更小體積）/JPG（白底無透明）
右側即時預覽圓角效果，滿意後點擊下載按鈕，檔案自動以 -rounded 後綴儲存

功能特點

雙單位支援：圓角半徑支援像素（0-500px）和百分比（0-50%）自由切換，靈活適配不同場景
3 種預設：小（10%）、中（25%）、大（50%）三種預設一鍵選擇，也支援自訂滑桿調整
三格式輸出：支援 PNG（帶透明通道）、WEBP（更小體積）、JPG（白底無透明）三種輸出格式
即時預覽：調整滑桿即時顯示圓角效果，棋盤格背景清晰展示透明區域
拖放上傳：支援點擊選擇或直接拖曳圖片到上傳區，JPG/PNG/WEBP 三種格式均可處理
本機處理：所有處理在瀏覽器 Canvas 中完成，圖片不上傳伺服器更安全

最佳实践

需要透明背景時優先選 PNG，不要選 JPG

JPG 不支援透明通道，選了會強制填充白底，圓角區域會出現難看的白色方塊。只有確認完全不需要透明時才用 JPG，否則預設選 PNG。

需要小體積且透明時選 WEBP

WEBP 同樣支援透明背景但體積比 PNG 小 25-35%，適合網頁素材場景。注意部分舊版本設計軟體可能不識別 WEBP，跨軟體協作時優先選 PNG。

App 圖示圓角比例選擇

iOS App 圖示系統會自動加大約 22.37% 圓角，但原圖帶白底會導致「白邊」瑕疵。正確做法是先用本工具預生成帶圓角的 PNG（推薦 22-25%）。Android Adaptive Icon 推薦 25% 圓角作為安全區。

頭像場景使用 50% 半徑生成正圓

LINE、Twitter、Instagram、Facebook 等大多數社交平台都使用正圓頭像。選擇 50% 預設即可一鍵生成正圓 PNG，透明背景適配深色/淺色主題。

iOS App Icon 圓角規範

不要把圓角圖直接用 CSS 圓角容器再顯示

如果已經用本工具匯出了帶圓角的 PNG，就不要再用 CSS border-radius + overflow:hidden 套一層，否則會雙重處理導致邊緣不清晰。圓角圖片直接 img 標籤展示即可。

需要更複雜的圓角（單角不同、TabBar 上圓角）

本工具僅支援四角相同的標準圓角。如需 TabBar 頂部 2 角圓角、底部 2 角圓角、或單角不同圓角等複雜場景，請使用 [圖片編輯器](/image/image-editor/) 或 Figma 等專業設計工具。

常見問題

怎麼給圖片加入圓角效果？

上傳圖片後點擊小、中、大預設按鈕快速選擇常用圓角，或拖動滑桿自訂像素值（0-500px）或百分比（0-50%）。右側即時預覽圓角效果，滿意後點擊下載即可，PNG 格式自動保留透明背景。

圓角半徑用像素還是百分比？

像素適合精確控制圓角大小，適合固定尺寸場景。百分比按圖片短邊比例計算圓角，適配不同尺寸圖片時更靈活。本工具支援點擊切換像素/百分比兩種單位，50% 半徑可輸出完全正圓，特別適合頭像。

圓角區域會變成什麼顏色？

選擇 PNG 或 WEBP 格式時，圓角區域為完全透明像素（Alpha=0），可放在任意背景上自然融合。選擇 JPG 格式時會自動填充白色背景（頁面會顯示黃色警告提示），適合不需要透明的成品圖。

支援哪些圖片格式？

輸入支援 JPG、PNG、WEBP 三種常見格式，輸出可選 PNG（帶透明）、WEBP（更小體積）、JPG（白底）三種格式。輸出檔名會自動追加 -rounded 後綴，方便區分原圖和處理後的圖片。

圓角大小有限制嗎？

百分比模式範圍 0-50%（50% 即為正圓），像素模式範圍 0-500px。圓角值越大四角越圓，達到圖片短邊一半時即變正圓。本工具基於 Canvas arcTo + clip 實現標準圓角（非 Squircle 超橢圓）。

可以做頭像或 App 圖示嗎？

非常適合。製作正圓頭像選 50% 預設即可一鍵生成；iOS App 圖示建議 22-25%（使用 25% 預設一鍵匹配），Android Adaptive Icon 推薦 25% 圓角作為安全區。輸出 PNG 透明背景適配各種主題。

圓角處理會讓圖片變模糊嗎？

不會。本工具基於 Canvas 在原圖解析度上做路徑裁剪，不做重取樣或壓縮，圓角後的圖片畫質與原圖完全一致。圓角區域是真正的透明像素而非模糊過渡，邊緣清晰銳利。

圖片處理會外洩嗎？

不會。所有處理均在本機瀏覽器內透過 Canvas API 完成，圖片從載入到下載全程不經過任何伺服器，處理完即焚。即使是含個人隱私的圖片、證件照、頭像等敏感素材也能安心使用。

為什麼不顯示圓角效果？

請檢查：①圓角值是否大於 0（滑桿不在最左端）；②圖片是否成功載入（檔案格式需為 JPG/PNG/WEBP）；③瀏覽器是否支援 HTML5 Canvas（現代瀏覽器都支援）。如仍有問題可嘗試重新整理頁面後重新上傳。

和 CSS border-radius 有什麼區別？

CSS border-radius 是顯示層處理，匯出圖片仍為直角，且只支援網頁場景；本工具生成的是真實帶 Alpha 通道的 PNG 檔案，可以放到 PPT、影片、印刷品等任何不支援 CSS 的場景中使用。

術語表

圓角半徑（Border Radius）: 圓弧的半徑值，決定圓角的彎曲程度。值越大角越圓，最大等於圖片短邊一半時即變正圓。本工具支援像素（0-500px）和百分比（0-50%）兩種單位。
Alpha 通道: PNG/WEBP 自帶的透明通道，每像素 0-255 表示透明度。本工具圓角後四角像素的 Alpha=0，因此輸出背景是「完全透明」而非某種顏色，可放在任意背景上自然融合。
Squircle（超橢圓）: iOS 7+ 引入的圓角形態，比傳統圓角矩形更平滑。數學公式 x⁴+y⁴=r⁴。本工具輸出的是標準圓弧，如需 Squircle 請使用 Figma/Sketch 等設計工具。
Adaptive Icon: Android 8.0+ 引入的自適應圖示，由前景和背景兩層組成。推薦使用 25% 圓角作為安全區，OEM 廠商的 launcher 會按自家形狀做 mask。
Canvas arcTo: Canvas 2D API 的圓弧繪製方法。本工具使用 arcTo + clip 組合實現圓角矩形路徑，將圖片裁剪到圓角區域內，圓角區域在匯出時變 Alpha=0 透明像素。

平台圓角規範速查

平台 / 元素	基準尺寸	推薦圓角比例	約等於 (px)
iOS / iPadOS App Icon	`1024 × 1024`	約 22.37%	≈ 229 px
Android Adaptive Icon	`108 × 108`	約 25%	≈ 27 px
macOS Sonoma App Icon	`1024 × 1024`	Squircle 超級橢圓	無固定 px
Windows 11 卡片	`—`	約 8 px	8 px
Material Design 3 Large	`—`	約 28 px	28 px
LINE / Instagram 頭像	`640 × 640`	50%（完全圓）	320 px
Twitter / Facebook 頭像	`400 × 400`	50%（完全圓）	200 px
電商商品主圖	`800 × 800`	建議 16 ~ 24 px	16-24 px