Rounded Image & Border
Add rounded corners, background, and a custom border
Rounded Image & Border — what it does
Round an image's corners to a radius you set, add a border in any width and colour, and place it on a background colour, then download the finished PNG. It bakes into the file the treatment that CSS gives you on a webpage — useful anywhere CSS does not reach: slides, documents, emails and app stores.
When this tool helps
- Preparing rounded thumbnails for a presentation or PDF where CSS is not available.
- Giving a screenshot the same rounded, bordered treatment as the rest of a document's images.
- Producing a rounded avatar or card image for an email template.
How to use it
- Choose the image.
- Set the corner radius.
- Set border width and colour, and a background colour.
- Process and download the result.
Accuracy, limits, and good practice
- Radius reads relative to size: 16 pixels looks generous on a 200-pixel thumbnail and barely visible on a 2000-pixel screenshot.
- Export PNG and choose a background matching the destination, since the area outside the rounded corners has to be something.
- For a full circle, the circular avatar crop tool is the direct route rather than pushing radius to half the width.
Frequently asked questions
Are the corners transparent?
PNG output can carry transparency; if the destination flattens it, set the background colour to match that destination.
Why not just use CSS?
Use CSS on the web. This is for contexts with no stylesheet — slide decks, documents, email clients and store listings.
Does the border grow the image?
The border and any background are composited into the exported file, so its dimensions can be slightly larger than the source.
Related tools on this site
- Image Opacity Tool — Adjust image transparency and export as PNG
- SVG to PNG — Render SVG files as high-resolution PNG images
- Image Annotation Tool — Add text, rectangles, and arrows to an image
Everything above runs inside this page. Rounded Image & Border needs no account, no upload, and no server round trip — close the tab and nothing is left behind.
圖片圓角與邊框能做什麼
把圖片四角依你設定的半徑做圓角，加上任意寬度與顏色的邊框，再放到指定背景色上，最後下載完成的 PNG。它把 CSS 在網頁上能做到的處理，直接烘進檔案裡——用在 CSS 到不了的地方：投影片、文件、郵件與商店頁面。
什麼時候用得上
- 為無法使用 CSS 的簡報或 PDF，準備圓角縮圖。
- 讓截圖與文件中其他圖片有相同的圓角加邊框處理。
- 為郵件範本製作圓角頭像或卡片圖。
使用步驟
- 選擇圖片。
- 設定圓角半徑。
- 設定邊框寬度、顏色與背景色。
- 執行處理並下載結果。
精確度、限制與實務建議
- 半徑的觀感與尺寸相對：16 像素在 200 像素縮圖上很明顯，在 2000 像素截圖上幾乎看不見。
- 請輸出 PNG 並把背景設成與目的地相同，因為圓角外的區域總得是某個顏色。
- 要做正圓，請直接用圓形頭像裁切工具，而不是把半徑推到寬度的一半。
常見問題
圓角外是透明的嗎？
PNG 輸出可帶透明；若目的端會平坦化，請把背景色設成與目的端一致。
為什麼不直接用 CSS？
網頁上請用 CSS。這是給沒有樣式表的情境用的——簡報、文件、郵件軟體與商店頁。
邊框會讓圖片變大嗎？
邊框與背景會合成進匯出檔，因此尺寸可能略大於原圖。
本站相關工具
以上步驟全部在這個頁面內完成，圖片圓角與邊框 不需要註冊、不上傳檔案、也不經過伺服器，關閉分頁後不會留下任何資料。