Membulatkan Sudut Gambar

Tentang GeekFormat

Klik untuk mengunggah gambar

JPG / PNG / WEBP

Default Sudut Bulat

Ukuran Sudut Bulat

20%

050%

Format Output

Unggah gambar untuk menampilkan pratinjau

Tambahkan sudut membulat ke gambar apa pun secara online. Pilih preset atau geser slider, lihat hasilnya secara real-time, dan ekspor PNG transparan yang pas untuk latar apa pun — semua pemrosesan terjadi di peramban.

Rekomendasi Terkait

Generator ICO

Potong Gambar

Ubah Ukuran Gambar

Kompres Gambar

Ubah Gambar

Apa itu pembulatan sudut gambar?

Pembulatan sudut gambar adalah teknik mengganti empat sudut siku gambar dengan busur yang halus. Alat ini menggunakan arcTo() dari Canvas untuk menggambar jalur persegi panjang membulat, lalu memanggil clip() untuk memotong gambar ke area tersebut. Area yang tidak terpotong menjadi piksel transparan (Alpha=0) saat diekspor ke PNG.

**Efek visual apa yang ditawarkan sudut membulat?** Sudut membulat terlihat lebih lembut dan ramah dibandingkan sudut siku, mengurangi kesan keras. Mereka banyak dipakai pada ikon aplikasi, tombol, kartu, dan avatar. Super-elips iOS (squircle) membawa konsep ini makin jauh dengan kurva yang lebih halus.

**Mengapa banyak ikon aplikasi butuh sudut membulat?** Sejak iOS, iPadOS, dan macOS Big Sur, sistem otomatis menerapkan masker membulat pada ikon aplikasi, dan latar putih pada gambar sumber akan menimbulkan tepi putih yang terlihat. Solusinya ialah mengekspor PNG bersudut membulat terlebih dahulu dari sumbernya agar sistem tidak melakukan masking ulang — dan itulah tujuan alat ini.

**Piksel vs persen:** Piksel presisi tetapi sulit disejajarkan antar gambar; persen otomatis menyesuaikan dengan berbagai ukuran. Sistem desain umumnya memakai persen, misalnya 22,37 % untuk ikon iOS dan 25 % untuk Android Adaptive Icon.

**Beda dengan CSS border-radius:** CSS border-radius adalah efek lapisan tampilan, sehingga gambar yang diekspor tetap bersudut siku. Alat ini menghasilkan PNG asli dengan kanal Alpha, yang dapat digunakan di lingkungan tanpa dukungan CSS seperti PowerPoint, video, dan percetakan.

Kasus penggunaan

Buat foto profil untuk platform pesan dan media sosial (WhatsApp, Telegram, X, Instagram, Facebook) — hasilkan lingkaran sempurna dalam satu klik
Tambahkan sudut membulat ke ikon aplikasi dengan cepat (iOS 22–25 %, Android Adaptive Icon 25 %)
Haluskan sudut gambar utama e-commerce untuk meningkatkan rasio klik dan konversi
Proses aset gambar bersudut membulat secara lokal untuk slide PowerPoint, penyuntingan video, dan percetakan
Standarkan ikon dan aset desain pada ukuran sudut yang konsisten dalam sistem desain Anda (satu per satu)

Cara Penggunaan

Klik area unggah untuk memilih gambar, atau tarik file JPG, PNG, WEBP langsung ke area tersebut
Pilih preset Kecil (10 %), Sedang (25 %), atau Besar (50 %) untuk sudut instan, atau geser slider ke nilai kustom (klik untuk beralih antara persen dan piksel)
Pilih format keluaran: PNG (latar transparan), WEBP (lebih kecil), atau JPG (latar putih, tanpa transparansi)
Pratinjau hasil di sisi kanan dan klik Unduh untuk menyimpan file dengan akhiran -rounded secara otomatis

Fitur

Dua satuan: beralih bebas antara piksel (0–500 px) dan persen (0–50 %) untuk jari-jari sudut
3 preset: Kecil (10 %), Sedang (25 %), Besar (50 %) dalam satu klik, plus slider kustom
3 format keluaran: ekspor sebagai PNG (transparan), WEBP (ukuran lebih kecil) atau JPG (latar putih)
Pratinjau real-time: atur slider dan langsung lihat efeknya, latar papan catur memperlihatkan area transparan
Unggah tarik-dan-lepas: klik untuk memilih atau tarik gambar JPG, PNG, WEBP langsung ke area unggah
Pemrosesan lokal: semuanya berjalan di Canvas peramban, gambar tidak pernah meninggalkan perangkat Anda

Best Practices

Pilih PNG daripada JPG saat butuh transparansi

JPG tidak mendukung kanal Alpha. Jika Anda memilih JPG, sudut akan diisi putih dan muncul blok putih yang tidak sedap dipandang. Pilih JPG hanya bila Anda yakin tidak butuh transparansi, selain itu gunakan PNG sebagai default.

Pilih WEBP untuk aset transparan yang perlu ukuran kecil

WEBP juga mendukung transparansi dan 25–35 % lebih kecil dari PNG, cocok untuk aset web. Beberapa perangkat lunak desain lama tidak mengenali WEBP, jadi utamakan PNG saat berkolaborasi lintas alat.

Memilih rasio sudut untuk ikon aplikasi

iOS otomatis menerapkan sekitar 22,37 % sudut pada ikon aplikasi, tetapi latar putih pada gambar sumber akan menimbulkan tepi putih yang terlihat. Solusinya, hasilkan PNG bersudut membulat lebih dulu dengan alat ini (disarankan 22–25 %). Untuk Android Adaptive Icon, 25 % adalah jari-jari aman.

Gunakan jari-jari 50 % untuk avatar lingkaran sempurna

Sebagian besar platform sosial (WhatsApp, Telegram, X, Instagram, dll.) menampilkan avatar sebagai lingkaran sempurna. Preset 50 % menghasilkan PNG lingkaran transparan dalam satu klik, yang pas untuk tema terang maupun gelap.

Pedoman ikon aplikasi iOS

Jangan tumpuk CSS border-radius di atas gambar membulat yang diekspor

Setelah mengekspor PNG bersudut membulat dari alat ini, jangan letakkan di dalam kontainer dengan CSS border-radius + overflow:hidden, karena tepi akan diproses dua kali dan menjadi buram. Tampilkan gambar membulat langsung dengan tag img sederhana.

Perlu bentuk lebih rumit (jari-jari beda per sudut, hanya bagian atas)?

Alat ini hanya mendukung sudut seragam di keempat sisi. Untuk membulatkan hanya atas, hanya bawah, atau jari-jari berbeda per sudut (TabBar, splash screen), gunakan editor gambar atau alat desain seperti Figma.

Pertanyaan Umum

Bagaimana cara menambahkan sudut membulat ke gambar?

Setelah mengunggah, klik preset Kecil, Sedang, atau Besar untuk pembulatan cepat, atau geser slider untuk menetapkan nilai piksel (0–500 px) atau persen (0–50 %) sesuai keinginan. Panel kanan menampilkan hasil secara real-time. Setelah puas, klik Unduh untuk menyimpan file dengan akhiran -rounded secara otomatis.

Lebih baik pakai piksel atau persen untuk jari-jari sudut?

Piksel memberikan kontrol presisi dan cocok untuk aset berukuran tetap. Persen diskalakan mengikuti sisi terpendek gambar dan mudah beradaptasi dengan berbagai ukuran. Alat ini mendukung perpindahan satuan dalam satu klik, dan 50 % selalu menghasilkan lingkaran sempurna — ideal untuk foto profil.

Apa yang terjadi pada area yang dibulatkan?

Dengan keluaran PNG atau WEBP, area yang dibulatkan benar-benar transparan (Alpha=0) dan menyatu dengan mulus ke latar apa pun. Dengan keluaran JPG, area tersebut diisi putih (peringatan kuning muncul di antarmuka); gunakan JPG hanya ketika transparansi tidak diperlukan.

Format gambar apa saja yang didukung?

Masukan mendukung JPG, PNG, dan WEBP. Keluaran dapat berupa PNG (transparan), WEBP (lebih kecil) atau JPG (latar putih). File yang diunduh otomatis mendapat akhiran -rounded agar tidak tertukar dengan aslinya.

Apa batas jari-jari sudutnya?

Mode persen berjalan dari 0 sampai 50 % (50 % menghasilkan lingkaran sempurna), mode piksel dari 0 sampai 500 px. Semakin besar nilai, sudut semakin bulat. Alat ini menggunakan Canvas arcTo + clip untuk sudut lingkaran standar, tanpa super-elips Squircle.

Bisakah saya membuat avatar atau ikon aplikasi?

Tentu. Untuk avatar lingkaran sempurna gunakan preset 50 %. Untuk ikon iOS direkomendasikan 22–25 % (preset 25 % mencocokkan dalam satu klik). Untuk Android Adaptive Icon, 25 % adalah jari-jari aman. Keluaran PNG transparan pas untuk tema apa pun.

Apakah pembulatan membuat gambar jadi buram?

Tidak. Alat bekerja pada resolusi asli melalui pemotongan jalur pada Canvas, tanpa pensampelan ulang atau kompresi. Kualitas keluaran identik dengan aslinya; hanya sudut yang dipotong dan tepi tetap tajam.

Apakah gambar saya dikirim ke server?

Tidak. Semuanya terjadi secara lokal di peramban melalui API Canvas. Gambar tidak dikirim ke server mana pun dan dihapus saat Anda meninggalkan halaman. Foto pribadi, pindaian identitas, dan aset sensitif dapat diproses dengan aman.

Kenapa efek pembulatan tidak muncul?

Mohon periksa: ① nilai jari-jari lebih besar dari 0 (slider tidak di posisi paling kiri); ② gambar telah termuat (JPG, PNG, atau WEBP); ③ peramban Anda mendukung HTML5 Canvas (semua peramban modern mendukungnya). Jika masalah berlanjut, segarkan halaman dan unggah ulang.

Apa bedanya dengan CSS border-radius?

CSS border-radius hanya bekerja di lapisan tampilan peramban dan tidak memanggang sudut ke file gambar. Alat ini mengekspor file PNG asli dengan kanal Alpha, sehingga gambar membulat dapat dipakai di PowerPoint, penyuntingan video, percetakan, dan lingkungan apa pun tanpa dukungan CSS.

Glosarium

Jari-jari sudut (Border Radius): Jari-jari busur sudut membulat. Nilai lebih besar menghasilkan sudut lebih bulat; maksimum adalah setengah dari sisi terpendek gambar, yang menghasilkan lingkaran sempurna. Alat ini mendukung piksel (0–500 px) dan persen (0–50 %) sebagai satuan.
Kanal Alpha: Kanal transparansi bawaan pada PNG dan WEBP, dengan 0–255 per piksel. Alat menetapkan piksel sudut membulat ke Alpha=0, sehingga keluarannya benar-benar transparan dan menyatu dengan latar apa pun.
Squircle (super-elips): Bentuk pembulatan yang diperkenalkan sejak iOS 7+, lebih halus dari sudut standar, mengikuti persamaan x⁴+y⁴=r⁴. Alat ini menghasilkan busur standar; gunakan Figma atau Sketch bila butuh Squircle.
Adaptive Icon: Format ikon Android 8.0+ dengan lapisan latar depan dan latar belakang yang terpisah. Jari-jari 25 % adalah area aman; peluncur OEM akan menerapkan maskanya sendiri (lingkaran, squircle, dll.).
Canvas arcTo: Metode API Canvas 2D untuk menggambar busur. Alat ini menggabungkan arcTo + clip untuk membangun jalur persegi panjang membulat, memotong gambar di dalamnya, dan membuat area luar menjadi piksel transparan saat diekspor.

Referensi cepat jari-jari sudut per platform

Platform / Elemen	Ukuran acuan	Rasio yang disarankan	Perkiraan (px)
Ikon aplikasi iOS / iPadOS	`1024 × 1024`	Sekitar 22,37 %	≈ 229 px
Android Adaptive Icon	`108 × 108`	Sekitar 25 %	≈ 27 px
Ikon aplikasi macOS Sonoma	`1024 × 1024`	Super-elips Squircle	Tanpa px tetap
Kartu Windows 11	`—`	Sekitar 8 px	8 px
Material Design 3 Large	`—`	Sekitar 28 px	28 px
Avatar WhatsApp / Telegram	`640 × 640`	50 % (lingkaran sempurna)	320 px
Avatar Twitter / Instagram	`400 × 400`	50 % (lingkaran sempurna)	200 px
Gambar utama e-commerce	`800 × 800`	16–24 px disarankan	16-24 px

Authoritative References

ReferenceMDN - border-radius
ReferenceApple HIG - Pedoman ikon aplikasi
ReferenceWikipedia - Squircle
ReferenceMDN - CanvasRenderingContext2D.arcTo()