Bo góc ảnh

Nhấp để tải ảnh lên

JPG / PNG / WEBP

Cài đặt sẵn Góc

Độ cong Góc

20%
050%

Định dạng Đầu ra

Tải lên hình ảnh để xem trước

Thêm góc bo tròn cho mọi hình ảnh trực tuyến. Chọn cài đặt sẵn hoặc kéo thanh trượt, xem trước theo thời gian thực và xuất PNG trong suốt phù hợp với mọi nền — mọi xử lý đều diễn ra cục bộ trong trình duyệt.

Đề xuất Liên quan

Trinh tao ICO

Cắt ảnh

Thay đổi kích thước ảnh

Nén ảnh

Chuyển đổi ảnh

Bo góc ảnh là gì?

Bo góc ảnh là kỹ thuật xử lý thay bốn góc vuông của ảnh bằng các cung mượt mà. Công cụ dùng arcTo() của Canvas để vẽ đường dẫn hình chữ nhật bo góc, sau đó gọi clip() để cắt ảnh theo vùng đó. Phần ngoài vùng cắt trở thành pixel trong suốt (Alpha=0) khi xuất PNG.

**Góc bo tròn có hiệu ứng thị giác gì?** So với góc vuông, góc bo tròn trông mềm mại và thân thiện hơn, giảm bớt sự sắc nhọn. Chúng được sử dụng rộng rãi trong biểu tượng ứng dụng, nút bấm, thẻ và avatar. Siêu elip của iOS (squircle) đẩy ý tưởng này đi xa hơn với các đường cong mượt hơn.

**Tại sao nhiều biểu tượng ứng dụng yêu cầu góc bo tròn?** Từ iOS, iPadOS và macOS Big Sur, hệ thống tự động áp mặt nạ bo góc cho biểu tượng ứng dụng, và nếu ảnh gốc có nền trắng sẽ tạo viền trắng lộ rõ. Cách khắc phục là xuất trước PNG bo góc từ ảnh nguồn để hệ thống không mask lại — chính là mục đích của công cụ này.

**Pixel hay phần trăm:** Pixel chính xác nhưng khó căn chỉnh giữa các ảnh; phần trăm tự thích ứng với kích thước. Hệ thống thiết kế thường dùng phần trăm, ví dụ 22,37 % cho biểu tượng iOS và 25 % cho Android Adaptive Icon.

**Khác với CSS border-radius:** CSS border-radius là hiệu ứng lớp hiển thị, nên ảnh xuất vẫn giữ góc vuông. Công cụ này tạo PNG thực với kênh Alpha, dùng được trong mọi ngữ cảnh không hỗ trợ CSS như PowerPoint, video và in ấn.

Trường hợp sử dụng

  • Tạo ảnh đại diện cho các nền tảng nhắn tin và mạng xã hội (Zalo, Messenger, WhatsApp, Telegram, X, Instagram, Facebook) — tạo hình tròn hoàn hảo chỉ với một cú nhấp
  • Nhanh chóng thêm góc bo tròn cho biểu tượng ứng dụng (iOS 22–25 %, Android Adaptive Icon 25 %)
  • Làm dịu các góc của ảnh chính sản phẩm thương mại điện tử, tăng tỷ lệ nhấp và chuyển đổi
  • Xử lý cục bộ tài sản ảnh bo góc cho slide PowerPoint, chỉnh sửa video và in ấn
  • Chuẩn hoá các bộ biểu tượng và tài sản thiết kế theo cùng kích thước góc trong hệ thống thiết kế (xử lý từng cái một)

Cách Sử dụng

  1. Nhấp vào vùng tải lên để chọn hình ảnh, hoặc kéo trực tiếp tệp JPG, PNG, WEBP vào vùng đó
  2. Chọn cài đặt sẵn Nhỏ (10 %), Vừa (25 %) hoặc Lớn (50 %) để bo góc ngay lập tức, hoặc kéo thanh trượt tới giá trị mong muốn (nhấp để chuyển giữa phần trăm và pixel)
  3. Chọn định dạng đầu ra: PNG (nền trong suốt), WEBP (kích thước nhỏ hơn) hoặc JPG (nền trắng, không trong suốt)
  4. Xem trước kết quả ở bên phải và nhấp Tải xuống để lưu tệp với hậu tố -rounded tự động

Tính năng

  • Hai đơn vị: chuyển đổi tự do giữa pixel (0–500 px) và phần trăm (0–50 %) cho bán kính góc
  • 3 cài đặt sẵn: Nhỏ (10 %), Vừa (25 %), Lớn (50 %) chỉ với một cú nhấp, kèm thanh trượt tuỳ chỉnh
  • 3 định dạng đầu ra: PNG (trong suốt), WEBP (kích thước nhỏ hơn) hoặc JPG (nền trắng)
  • Xem trước theo thời gian thực: điều chỉnh thanh trượt và thấy ngay hiệu ứng, nền bàn cờ hiển thị rõ vùng trong suốt
  • Kéo và thả để tải lên: nhấp để chọn hoặc kéo trực tiếp ảnh JPG, PNG, WEBP vào vùng tải
  • Xử lý cục bộ: mọi thứ chạy trong Canvas của trình duyệt, hình ảnh không rời khỏi thiết bị của bạn

Best Practices

Chọn PNG thay vì JPG khi cần nền trong suốt

JPG không hỗ trợ kênh Alpha. Nếu chọn JPG, các góc sẽ được tô trắng và xuất hiện những khối trắng xấu xí. Chỉ chọn JPG khi chắc chắn không cần trong suốt, mặc định nên dùng PNG.

Chọn WEBP cho tài sản trong suốt cần kích thước nhỏ

WEBP cũng hỗ trợ trong suốt và nhỏ hơn PNG 25–35 %, rất phù hợp cho tài sản web. Một số phần mềm thiết kế cũ không nhận diện được WEBP, vậy nên khi làm việc xuyên công cụ hãy ưu tiên PNG.

Chọn tỉ lệ bo góc cho biểu tượng ứng dụng

iOS tự động thêm góc khoảng 22,37 % cho biểu tượng ứng dụng, nhưng nền trắng trên ảnh gốc sẽ tạo viền trắng lộ rõ. Cách đúng là dùng công cụ này để tạo sẵn PNG bo góc (khuyến nghị 22–25 %). Android Adaptive Icon nên dùng bán kính 25 % làm vùng an toàn.

Dùng bán kính 50 % để tạo avatar hình tròn hoàn hảo

Hầu hết nền tảng mạng xã hội (Zalo, Messenger, X, Instagram, v.v.) hiển thị avatar dưới dạng hình tròn hoàn hảo. Cài đặt sẵn 50 % tạo PNG trong suốt hình tròn chỉ với một cú nhấp, phù hợp với cả chủ đề sáng và tối.

Hướng dẫn biểu tượng ứng dụng iOS

Không xếp chồng CSS border-radius lên ảnh bo góc đã xuất

Khi đã xuất PNG bo góc từ công cụ này, đừng đặt nó vào khung có CSS border-radius + overflow:hidden, nếu không các cạnh sẽ bị xử lý hai lần và trông mờ đi. Hãy hiển thị ảnh bo góc bằng thẻ img đơn giản.

Cần hình dạng phức tạp hơn (bán kính khác nhau từng góc, chỉ bo phía trên)?

Công cụ chỉ hỗ trợ bốn góc bằng nhau. Đối với bo chỉ phía trên, chỉ phía dưới, hoặc mỗi góc một bán kính (TabBar, màn hình chờ), hãy dùng trình chỉnh sửa ảnh hoặc công cụ thiết kế như Figma.

Câu hỏi Thường gặp

Làm sao thêm góc bo tròn cho hình ảnh?

Sau khi tải lên, nhấp vào cài đặt sẵn Nhỏ, Vừa hoặc Lớn để bo góc nhanh, hoặc kéo thanh trượt để đặt giá trị pixel (0–500 px) hoặc phần trăm (0–50 %) tuỳ ý. Khung bên phải hiển thị kết quả theo thời gian thực. Khi hài lòng, nhấp Tải xuống để lưu tệp với hậu tố -rounded tự động.

Nên dùng pixel hay phần trăm cho bán kính góc?

Pixel cho phép kiểm soát chính xác và phù hợp với tài sản có kích thước cố định. Phần trăm co giãn theo cạnh ngắn của ảnh và thích ứng với các kích thước khác nhau. Công cụ hỗ trợ chuyển đổi đơn vị bằng một cú nhấp, 50 % luôn tạo ra hình tròn hoàn hảo — lý tưởng cho ảnh đại diện.

Vùng bo góc sẽ trông như thế nào?

Khi chọn PNG hoặc WEBP, vùng bo góc hoàn toàn trong suốt (Alpha=0) và hoà quyện tự nhiên với mọi nền. Khi chọn JPG, vùng này được tô trắng (giao diện sẽ hiển thị cảnh báo vàng); chỉ dùng JPG khi không cần trong suốt.

Hỗ trợ những định dạng ảnh nào?

Đầu vào hỗ trợ JPG, PNG và WEBP. Đầu ra có thể là PNG (trong suốt), WEBP (kích thước nhỏ hơn) hoặc JPG (nền trắng). Tệp tải xuống tự động được gắn hậu tố -rounded để không nhầm với ảnh gốc.

Giới hạn của bán kính góc là gì?

Chế độ phần trăm từ 0 đến 50 % (50 % cho hình tròn hoàn hảo), chế độ pixel từ 0 đến 500 px. Giá trị càng lớn, góc càng tròn. Công cụ sử dụng Canvas arcTo + clip cho các góc tròn tiêu chuẩn, không hỗ trợ siêu elip Squircle.

Có thể tạo ảnh đại diện hoặc biểu tượng ứng dụng không?

Có. Để có ảnh đại diện hình tròn hoàn hảo, hãy dùng cài đặt sẵn 50 %. Đối với biểu tượng iOS, nên dùng 22–25 % (dùng cài đặt sẵn 25 % để khớp trong một cú nhấp). Với Android Adaptive Icon, 25 % là bán kính an toàn. Đầu ra PNG trong suốt phù hợp với mọi chủ đề.

Bo góc có làm ảnh bị mờ không?

Không. Công cụ làm việc ở độ phân giải gốc thông qua cắt theo đường dẫn trong Canvas, không lấy mẫu lại và không nén. Chất lượng đầu ra giống hệt ảnh gốc — chỉ phần góc được cắt, cạnh vẫn sắc nét.

Ảnh của tôi có được tải lên máy chủ không?

Không. Mọi thứ diễn ra cục bộ trong trình duyệt thông qua API Canvas. Ảnh không được gửi tới bất kỳ máy chủ nào và bị xoá khi bạn rời trang. Ảnh cá nhân, bản scan giấy tờ và tài sản nhạy cảm có thể được xử lý an toàn.

Tại sao hiệu ứng bo góc không hiển thị?

Vui lòng kiểm tra: ① giá trị bán kính lớn hơn 0 (thanh trượt không ở vị trí ngoài cùng bên trái); ② ảnh đã tải thành công (phải là JPG, PNG hoặc WEBP); ③ trình duyệt hỗ trợ HTML5 Canvas (mọi trình duyệt hiện đại đều hỗ trợ). Nếu vẫn còn lỗi, hãy tải lại trang và tải ảnh lên lại.

Khác gì so với CSS border-radius?

CSS border-radius chỉ hoạt động ở lớp hiển thị của trình duyệt và không ghi góc vào tệp ảnh. Công cụ này xuất tệp PNG thực với kênh Alpha, nên ảnh bo góc có thể dùng trong PowerPoint, chỉnh sửa video, in ấn và mọi ngữ cảnh không hỗ trợ CSS.

Thuật ngữ

Bán kính góc (Border Radius)
Bán kính của cung bo góc. Giá trị càng lớn, góc càng tròn; tối đa bằng một nửa cạnh ngắn của ảnh, cho hình tròn hoàn hảo. Công cụ hỗ trợ đơn vị pixel (0–500 px) và phần trăm (0–50 %).
Kênh Alpha
Kênh trong suốt có sẵn trong PNG và WEBP, với 0–255 trên mỗi pixel. Công cụ đặt các pixel ở góc bo về Alpha=0, tạo ra đầu ra trong suốt hoàn toàn, hoà quyện tự nhiên với mọi nền.
Squircle (siêu elip)
Hình bo góc được giới thiệu từ iOS 7+, mượt mà hơn góc tiêu chuẩn, tuân theo phương trình x⁴+y⁴=r⁴. Công cụ tạo cung tròn tiêu chuẩn; dùng Figma hoặc Sketch nếu cần Squircle.
Adaptive Icon
Định dạng biểu tượng Android 8.0+ với lớp tiền cảnh và hậu cảnh tách riêng. Bán kính 25 % là vùng an toàn; trình khởi chạy OEM sẽ áp mặt nạ riêng (tròn, squircle, v.v.).
Canvas arcTo
Phương thức của API Canvas 2D để vẽ cung. Công cụ kết hợp arcTo + clip để dựng đường dẫn hình chữ nhật bo góc, cắt ảnh theo đó và làm vùng ngoài trong suốt khi xuất.

Tra cứu nhanh bán kính góc theo nền tảng

Nền tảng / phần tửKích thước tham chiếuTỉ lệ khuyến nghịXấp xỉ (px)
Biểu tượng ứng dụng iOS / iPadOS1024 × 1024Khoảng 22,37 %≈ 229 px
Android Adaptive Icon108 × 108Khoảng 25 %≈ 27 px
Biểu tượng ứng dụng macOS Sonoma1024 × 1024Siêu elip SquircleKhông có px cố định
Thẻ Windows 11—Khoảng 8 px8 px
Material Design 3 Large—Khoảng 28 px28 px
Avatar Zalo / Messenger640 × 64050 % (hình tròn hoàn hảo)320 px
Avatar Twitter / Instagram400 × 40050 % (hình tròn hoàn hảo)200 px
Ảnh chính thương mại điện tử800 × 80016–24 px khuyến nghị16-24 px

Authoritative References