Pembulat Sudut Gambar

Bulatkan sudut gambar online — tanpa perlu Photoshop

Corner rounder gambar ini melembutkan sudut foto, logo, avatar atau screenshot dan menghasilkan PNG transparan yang bersih. Masukkan gambar, geser slider radius, dan pratinjau langsung diperbarui secara instan di atas latar kotak-kotak sehingga Anda bisa melihat persis di mana transparansi jatuh sebelum mengunduh. Anda bisa menempel dari clipboard dengan Ctrl/⌘-V, menyeret file ke canvas, atau menelusuri dari perangkat Anda — mana pun yang lebih cepat.

Ini adalah cara cepat tanpa aplikasi untuk membulatkan sudut gambar tanpa Photoshop — tanpa upload, tanpa pendaftaran, dan tanpa watermark. Semuanya berjalan di browser Anda. Resolusi asli dipertahankan dan hanya sudutnya yang dipotong menjadi transparan, sehingga tidak ada kehilangan kualitas di bagian mana pun dari gambar. Berbeda dengan Fotor atau Adobe Express, tidak perlu akun dan tidak perlu paket berbayar untuk unduhan yang bersih.

Kontrol per sudut, lingkaran dan squircle

Alihkan satuan radius antara % dan px, lalu bulatkan keempat sudut sekaligus atau aktifkan mode per sudut untuk mengatur sudut kiri-atas, kanan-atas, kanan-bawah dan kiri-bawah secara independen. Pembulatan per sudut berguna untuk bubble chat, komponen kartu dan bentuk tab yang hanya membulatkan satu atau dua sudut sambil mempertahankan sisanya tetap tajam.

Preset satu-ketuk langsung menuju Square, Subtle, Card, Circle/pill (radius maksimum) dan Squircle — superellipse bergaya iOS yang halus yang digunakan untuk ikon aplikasi dan komponen UI modern. Dorong gambar persegi ke 50% untuk lingkaran sempurna, atau persegi panjang untuk bentuk pil. Setiap preset menampilkan radius saat ini sebagai persentase dan nilai piksel, sehingga Anda bisa menyalinnya ke Figma, CSS, atau alat desain apa pun.

PNG transparan vs JPG — mana yang mempertahankan sudut membulat

Sudut membulat hanya tetap tembus pandang dalam format dengan kanal alpha, itulah sebabnya ekspor default adalah PNG sudut membulat. JPG tidak memiliki transparansi, sehingga alat ini mengisi area sudut dengan warna latar belakang pilihan Anda saat Anda mengekspor sebagai JPG — pilih opsi itu hanya ketika Anda tahu persis latar belakang akhirnya dan menginginkan file yang datar dan lebih kecil.

Panel output menampilkan dimensi piksel yang tepat dan perkiraan ukuran file sebelum Anda mengunduh, sehingga Anda tahu apakah Anda akan mendapat tepi transparan atau isian solid. Untuk aset web, ikon aplikasi dan tanda tangan email, PNG adalah pilihan yang tepat. Untuk foto profil di platform yang hanya menerima JPG, atur warna latar belakang yang sesuai dan ekspor sebagai JPG.

Perbandingan dengan Fotor, Adobe Express dan alat serupa

Beberapa alat menawarkan pembulatan sudut, tetapi masing-masing punya kekurangan. Fotor menambahkan watermark pada setiap ekspor kecuali Anda upgrade ke Fotor Pro ($8,99/bulan). Adobe Express memerlukan akun Adobe gratis dan membatasi ekspor resolusi lebih tinggi untuk pelanggan Creative Cloud berbayar. Fitur sudut membulat Canva bekerja di dalam Canva, tetapi mengekspor PNG transparan mandiri tanpa langganan terbatas — dan hasil Canva terikat pada file Canva alih-alih disimpan sebagai aset gambar yang bisa digunakan ulang.

Alat ini tanpa watermark, tanpa akun, tanpa batas ekspor, dan tanpa langganan. Gambar tidak pernah meninggalkan perangkat Anda, sehingga tidak ada trade-off privasi juga. Setiap fitur — kontrol per sudut, preset squircle, border, isian latar belakang, ukuran unduhan persentase — tersedia tanpa biaya.

Latar belakang, border, dan ekspor berukuran avatar

Tambahkan warna latar belakang solid untuk mengisi sudut saat menempatkan foto membulat pada kartu atau warna halaman yang diketahui, atau biarkan transparan untuk fleksibilitas penuh di berbagai latar belakang. Aktifkan border opsional dengan lebar dan warna yang bisa disesuaikan untuk membingkai avatar, foto profil dan thumbnail produk dengan garis tepi yang bersih.

Butuh file yang lebih kecil untuk penggunaan tertentu? Pilih Download size 75%, 50% atau 25% untuk mengekspor thumbnail ringan yang tetap proporsional sempurna. Pembulatan, isian dan border semuanya digambar pada canvas di ukuran target alih-alih diskalakan setelahnya, sehingga gambar tetap tajam tanpa anti-aliasing buram pada dimensi yang lebih kecil.

Membulatkan sudut di Slides, PowerPoint, Canva, Docs dan Photoshop

Setiap aplikasi desain atau presentasi utama bisa membulatkan sudut, tetapi masing-masing melakukannya dengan cara berbeda dengan batasan berbeda. Google Slides menyembunyikannya di bawah dropdown Crop → Shapes tanpa input radius numerik. PowerPoint menggunakan Crop to Shape → Rounded Rectangle dengan handle seret dan tanpa kontrol nilai yang tepat. Canva punya slider Rounded corners tetapi memberi watermark pada ekspor gratis dan membatasi kontrol presisi ke Pro. Google Docs tidak memiliki opsi pembulatan sudut native untuk gambar yang disisipkan. Photoshop memerlukan pengaturan clipping mask rounded-rectangle di beberapa layer.

Alat ini menyertakan catatan langkah-demi-langkah cepat untuk setiap aplikasi di FAQ di atas, tetapi membulatkan gambar di sini sekali saja memberi Anda PNG transparan yang presisi dan bisa digunakan ulang untuk ditempel ke salah satu aplikasi tersebut — dan ke tanda tangan email, situs web, aplikasi mobile, dan di mana pun lagi yang tidak memiliki kontrol sudut bawaan. Satu unduhan, berfungsi di mana saja.

Matematika sudut membulat: busur, radius, dan border-radius CSS

Sudut membulat secara geometris adalah busur seperempat lingkaran yang radiusnya sama dengan nilai corner-radius yang Anda atur. Di mana tepi lurus bertemu dengan lengkungan, busur tersebut harus bersinggungan dengan kedua tepi — artinya menyentuh setiap tepi tepat di satu titik tanpa lekukan. Dalam CSS, properti border-radius adalah shorthand untuk hingga delapan nilai: setiap empat sudut bisa memiliki radius horizontal dan vertikal terpisah, dipisahkan oleh karakter / (border-radius: 30px / 15px menghasilkan lengkungan elips yang lebih datar, bukan lingkaran). Trik border-radius: 50% yang terkenal untuk lingkaran bekerja karena 50% dari lebar dan 50% dari tinggi elemen persegi adalah sama, sehingga empat seperempat elips bergabung menjadi lingkaran sempurna; pada persegi panjang, 50% menghasilkan bentuk pil (stadium) sebagai gantinya.

Shorthand empat nilai mengikuti urutan searah jarum jam dimulai dari kiri-atas: border-radius: TL TR BR BL. Tiga nilai berarti TL TR+BL BR (yang keempat yang dihilangkan mencerminkan yang kedua). Dua nilai berarti TL+BR TR+BL (pasangan diagonal berbagi nilai). Properti longhand individual — border-top-left-radius, border-top-right-radius, border-bottom-right-radius dan border-bottom-left-radius — menggantikan shorthand untuk satu sudut. Dengan cukup kreativitas, border-radius CSS saja bisa menghasilkan bentuk daun (dua sudut berdekatan diatur ke 100%, dua ke 0), bentuk telur (radius horizontal dan vertikal asimetris), dan lengkungan wedge keju. Untuk clipping yang lebih kompleks — poligon sembarang, path SVG, atau bentuk inset — CSS clip-path mengambil alih di mana border-radius berhenti.

Setara CSS dari radius mana pun yang Anda atur di alat ini muncul di panel output sehingga Anda bisa menyalinnya langsung ke stylesheet. Untuk gambar yang sudah dipublikasikan di halaman web, satu aturan CSS bisa menggantikan ekspor manual sepenuhnya: img.rounded { border-radius: 12px; } Alat ini paling berguna ketika gambar perlu berpindah ke konteks di mana CSS tidak berlaku — slide, email, aplikasi mobile native, atau aset desain yang diekspor.

Squircle: superellipse Apple dan sudut continuous-curvature

Bentuk ikon aplikasi Apple — diperkenalkan dengan iOS 7 pada 2013 dan digunakan di setiap layar utama iPhone sejak saat itu — bukanlah persegi panjang membulat biasa. Ini adalah superellipse, didefinisikan oleh rumus |x/a|ⁿ + |y/b|ⁿ = 1 di mana eksponen n kira-kira 5, bukan nilai 2 yang menghasilkan elips biasa. Pada n ≈ 5, kurva tetap hampir lurus di sepanjang sisi dan bertransisi menjadi lengkungan yang rapat dan halus di setiap sudut. Bentuk ini biasa disebut squircle — gabungan kata square dan circle — karena secara visual berada di tengah-tengah antara keduanya. Spotify, Instagram, WhatsApp dan hampir setiap ikon aplikasi iOS di layar utama Anda hidup dalam bentuk ini.

Perbedaan kunci dari persegi panjang membulat border-radius sederhana adalah kontinuitas kelengkungan. Busur lingkaran memiliki diskontinuitas pada titik di mana ia bertemu dengan tepi lurus: kelengkungan langsung melompat dari nol (garis datar) ke 1/r (busur). Diskontinuitas ini menciptakan lekukan visual yang halus tapi bisa dirasakan yang oleh desainer industri disebut sambungan G1. Superellipse tidak memiliki lompatan seperti itu — kelengkungan berubah secara bertahap sepenuhnya dari sisi datar hingga lengkungan maksimum di sudut. Desainer menyebut ini kontinuitas G2, dan ini adalah properti yang sama yang membuat tepi chassis iPhone, permukaan Apple Watch, dan panel bodi mobil premium terlihat lebih halus dibanding bentuk siku-siku yang dipermesinkan dengan fillet yang dibaut.

Android menggunakan pendekatan berbeda: adaptive icons mendefinisikan canvas 108×108 dp dengan zona aman 72×72 dp, dan launcher perangkat menerapkan bentuk clip-nya sendiri — lingkaran di Pixel, squircle di Samsung, teardrop di beberapa skin MIUI. Ini berarti ikon aplikasi yang sama bisa muncul dalam bentuk berbeda di perangkat berbeda, itulah sebabnya developer Android menyediakan ikon berlapis foreground-plus-background alih-alih PNG berbentuk pra-tetap. Preset squircle di alat ini menerapkan aproksimasi CSS dari superellipse menggunakan nilai border-radius besar yang dikombinasikan dengan penyesuaian per sudut yang halus, memberikan hasil yang meyakinkan secara visual untuk mockup UI, screenshot app store dan aset marketing tanpa perlu path clip SVG.

Sudut membulat dalam desain UI: psikologi, sejarah, dan pola card

Riset psikologi kognitif memberikan penjelasan yang jelas mengapa bentuk membulat mendominasi desain UI modern. Dalam studi tahun 2006 yang banyak dikutip, Moshe Bar dan Maital Neta menemukan bahwa orang secara konsisten menilai objek dengan kontur tajam dan runcing sebagai lebih mengancam atau tidak menyenangkan dibanding objek dengan kontur membulat — bahkan ketika objek tersebut abstrak dan tidak bermakna. Mekanismenya adalah amigdala, pusat deteksi ancaman otak, yang bereaksi lebih kuat terhadap bentuk bersudut. Sudut membulat mengurangi sinyal peringatan tingkat rendah ini, membuat antarmuka terasa lebih tenang, aman, dan mudah didekati. Ini bukan preferensi estetika yang berubah seiring tren; ini adalah temuan yang konsisten di berbagai budaya dan usia.

Sejarah desain sudut membulat digital erat terkait dengan iPhone asli (2007), yang chassis fisiknya memiliki radius sudut 9 mm yang dihitung dengan sengaja — angka yang menurut laporan diinsistensikan Steve Jobs meski ada keberatan dari tim engineering. Ikon layar iOS mencocokkan radius ini, dan seluruh UI sistem operasi mengikutinya. iOS 7 pada 2013 menghapus tekstur skeuomorphic dari antarmuka Apple sambil dengan sengaja mempertahankan sudut membulat sebagai bentuk utama tombol, kartu dan panel. Keputusan itu menetapkan sudut membulat sebagai tata bahasa visual yang mendefinisikan flat design, memengaruhi Material Design Android (diluncurkan 2014), Fluent Design Microsoft, dan hampir setiap sistem desain besar yang dibangun dalam dekade berikutnya.

Unit layout web yang dominan pada dekade 2010-an dan 2020-an adalah kartu (card) — kontainer persegi panjang berbatas, hampir selalu dengan sudut membulat, yang menampung satu bagian konten yang berbeda. Material Design mengkodifikasi pola ini pada 2014, tetapi daya tarik kartu berasal justru dari kombinasi batas yang terlihat (memberikan struktur) dan sudut lembut (mengurangi agresivitas visual). Riset dalam persepsi visual menunjukkan bahwa bingkai persegi panjang membulat mengarahkan mata ke konten interior secara lebih efektif dibanding bingkai tajam, yang menarik perhatian ke sudut itu sendiri. Bagi desainer produk, ini berarti border-radius bukan dekorasi — ini pilihan fungsional yang memengaruhi ke mana pengguna melihat dan seberapa aman atau menarik antarmuka terasa.