Bo tròn góc ảnh

Bán kính góc

Các hệ điều hành, cửa hàng ứng dụng và các hệ thống thiết kế giao diện người dùng đều sử dụng góc tròn – từ biểu tượng iOS, thẻ Material đến các thành phần hiện đại của Tailwind. Bạn chỉ cần tải lên bất kỳ hình ảnh nào, công cụ này sẽ làm tròn cả bốn góc với bán kính do bạn thiết lập, xuất file dưới định dạng PNG với các góc trong suốt, và có thể tùy chọn áp dụng bán kính khác cho từng góc để tạo hiệu ứng dạng phiếu yêu cầu hoặc dạng bong bóng thoại.

Cách làm tròn các góc hình ảnh

  1. 1

    Tải lên hình ảnh

    JPG, PNG hoặc WebP.

  2. 2

    Chọn bán kính

    Tính bằng điểm ảnh hoặc tỷ lệ phần trăm so với cạnh ngắn hơn.

  3. 3

    Tùy chọn: khác nhau ở mỗi góc

    Chỉ làm tròn các góc trên (thẻ), hoặc dạng bất đối xứng (vé).

  4. 4

    Lấy nền

    Độ trong suốt (PNG) hoặc màu đơn sắc nếu lưu dưới định dạng JPG.

  5. 5

    Xuất

    PNG giữ nguyên các góc tròn; JPG sẽ làm phẳng hình ảnh và chuyển sang màu sắc bạn chọn.

Các lựa chọn bán kính cho các hình dạng giao diện phổ biến

Cài đặt bán kính

Hình dạng Bán kính
Thẻ giao diện tinh tế 4–8px
Thẻ Material Design 4px (hoặc 8px trong M3)
Biểu tượng ứng dụng iOS 22,37% cạnh (hình “squircle”)
Biểu tượng ứng dụng macOS 18,75% cạnh
Bong bóng story Instagram 12–16px
Ảnh đại diện bo tròn 50% cạnh ngắn (tròn hoàn toàn)
Cuống vé Không đối xứng – chỉ bo một hoặc hai góc
Phía đuôi bong bóng trò chuyện Một góc nhỏ, phần còn lại lớn hơn

Vấn đề squircle

Biểu tượng iOS không phải là những hình chữ nhật bo tròn đơn giản, chúng dùng một “siêu elip (superellipse)” mượt mà hơn về mặt toán học ở phần chuyển tiếp. squircle thực thụ vượt quá những gì mà border-radius của CSS hay một lớp mặt nạ alpha đơn giản có thể dựng được; công cụ này xấp xỉ chúng bằng một hình chữ nhật bo tròn bậc cao, trông gần như không thể phân biệt ở các kích thước biểu tượng thông thường.

Đặc tính trong suốt

  • Định dạng PNG là mặc định – các góc được bo tròn sẽ chuyển thành các điểm ảnh trong suốt. Rất phù hợp cho biểu tượng ứng dụng, thẻ giao diện và mọi trường hợp cần ghép hình ảnh lên nền đa dạng.
  • Đầu ra định dạng JPG không thể có màu trong suốt. Các góc tròn sẽ được lấp đầy bằng màu bạn chọn, giúp ảnh trông như được bao quanh bởi một khung hình.

Bán kính khác nhau tại mỗi góc

Thiết kế dạng bong bóng trò chuyện: tạo ba góc tròn với độ rộng 12px và để một góc ở vị trí 0px (góc mà phần “đuôi” sẽ nối vào). Thiết kế dạng phiếu vé: hai cạnh nhọn và hai cạnh tròn. Sử dụng bán kính không đối xứng là cách nhanh chóng để thể hiện hình ảnh được gắn kết với một đối tượng khác.

Khử nhiễu điểm (Anti-aliasing)

Các đường cong góc được vẽ bằng kỹ thuật lấy mẫu siêu cao 4 lần, nhờ đó trông rất sắc nét ở mọi kích thước hiển thị thông thường. Dù được in ra hay khi phóng đại mạnh, bán kính vẫn duy trì độ mượt mà rõ rệt.

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

Apple sử dụng một hình squircle với độ cong tại các góc bằng khoảng 22,37% chiều dài cạnh của biểu tượng. Trên khung hình 1024 × 1024 điểm ảnh, bán kính góc hiệu dụng đạt khoảng 229 pixel; tuy nhiên, công thức tính toán chính xác có chút khác biệt so với hình chữ nhật bo tròn thông thường.

Đúng vậy. Bán kính được tính cho mỗi góc, bất kể tỷ lệ khung hình của hình ảnh. Ở các tỷ lệ cực đoan (rất rộng hoặc rất cao), việc thiết lập bán kính bằng 50% chiều dài cạnh ngắn sẽ tạo ra hình dạng giống một vỏ bọc.

Không, định dạng JPG không hỗ trợ tính trong suốt. Bạn có thể xuất file dưới định dạng PNG để giữ giá trị alpha được làm mượt, hoặc chọn một màu nền cho tệp JPG; các góc sẽ được lấp đầy bằng màu đó.

Đúng vậy. Công cụ này chỉ thêm một mặt nạ alpha mà không thay đổi kích thước hình ảnh. Nếu bạn muốn kết hợp cả hiệu ứng làm tròn và thay đổi kích thước, hãy áp dụng công cụ điều chỉnh kích thước trước tiên.

Công cụ liên quan

Công cụ này có phiên bản bằng các ngôn ngữ khác