图片圆角

点击上传图片

JPG / PNG / WEBP

圆角默认

圆角大小

20%
050%

输出格式

上传图片以显示预览

在线为图片添加圆角效果，拖动滑块实时预览，支持小、中、大三档预设一键选择，输出透明 PNG 适合任意背景，本地处理安全无忧。

相关推荐

ICO 图标生成

图片裁剪

图片尺寸调整

图片压缩

图片格式转换

什么是图片圆角处理？

图片圆角处理是把图片的 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 等），一键生成正圆头像
  • 为 App 图标快速添加圆角（iOS 推荐 22-25%，Android Adaptive Icon 推荐 25%）
  • 电商平台商品主图添加圆角后更柔和美观，提升用户点击与购买欲
  • PPT 演示文稿、视频剪辑、印刷品中需要圆角图片素材的本地处理
  • 设计系统统一规范时，批量制作相同圆角尺寸的图标和素材（需逐张处理）

使用方法

  1. 点击上传区域选择图片，或直接将 JPG/PNG/WEBP 图片拖拽到上传区
  2. 选择小（10%）、中（25%）、大（50%）预设按钮一键设置圆角，或拖动滑块自定义像素值（点击切换百分比/像素单位）
  3. 选择输出格式：PNG（带透明背景）/WEBP（更小体积）/JPG（白底无透明）
  4. 右侧实时预览圆角效果，满意后点击下载按钮，文件自动以 -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 等大多数社交平台都使用正圆头像。选择 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 Icon1024 × 1024约 22.37%≈ 229 px
Android Adaptive Icon108 × 108约 25%≈ 27 px
macOS Sonoma App Icon1024 × 1024Squircle 超级椭圆无固定 px
Windows 11 卡片—约 8 px8 px
Material Design 3 Large—约 28 px28 px
微信 / LINE 头像640 × 64050%（完全圆）320 px
Twitter / Instagram 头像400 × 40050%（完全圆）200 px
电商商品主图800 × 800建议 16 ~ 24 px16-24 px

Authoritative References