Generator Border Radius

Desain Sudut Membulat CSS Secara Visual dengan Pratinjau Langsung

Properti CSS border-radius adalah salah satu aturan yang paling sering dipakai di UI modern — ia membentuk kartu, avatar, tombol, badge, tooltip, hingga blob dekoratif. Generator border-radius CSS gratis ini memberi Anda editor visual langsung: setiap geseran slider langsung tercermin pada elemen pratinjau, sehingga Anda bisa menyetel radius yang tepat dan melihat hasilnya secara real time sebelum menyalin CSS yang dihasilkan.

Atur keempat sudut secara independen atau tautkan semuanya untuk pembulatan seragam. Beralihlah antara satuan px (ukuran piksel tetap) dan % (proporsional terhadap dimensi elemen). Gunakan pustaka preset bentuk untuk pola umum secara instan, hasilkan bentuk blob organik dengan satu klik, atau unggah gambar Anda sendiri untuk melihat pratinjau radius pada konten nyata — semuanya diproses sepenuhnya di browser Anda, tanpa ada yang diunggah ke server mana pun.

Preset Bentuk: Lingkaran, Pil, Kartu, Telur, dan Lainnya

Pustaka preset mencakup bentuk-bentuk yang paling sering dicari developer. Lingkaran (border-radius: 50%) mengubah elemen persegi menjadi lingkaran sempurna — standar untuk foto avatar, gambar profil, dan wadah ikon. Pil (9999px) mengubah sisi pendek menjadi setengah lingkaran sempurna terlepas dari ukuran elemen, menghasilkan bentuk tombol CTA atau tag klasik yang ada di hampir semua design system modern.

Kartu (16px) dan Slight (6px) sesuai dengan nilai pembulatan yang dipakai kebanyakan UI kit dan pustaka komponen. Top-round dan Bottom-round berguna untuk pemisah section, item daftar bertumpuk, dan tab bar di mana hanya satu sisi yang perlu membulat. Preset Telur memakai sintaks slash eliptis 8 nilai penuh — border-radius: 50% 50% 50% 50% / 40% 40% 60% 60% — menghasilkan kurva asimetris di tiap sudut, fondasi populer untuk hero art organik dan blob bergaya ilustrasi.

Sudut Terbalik, Cekung, dan Berlekuk (Inverted Border Radius)

Pencarian yang sering muncul adalah inverted border radius generator — sudut yang melengkung ke dalam, bukan ke luar. border-radius biasa hanya bisa menghasilkan kurva cembung (ke luar), jadi sudut cekung sejati memerlukan teknik berbeda. Pendekatan paling andal adalah mask radial-gradient: letakkan lingkaran transparan kecil di setiap sudut yang ingin Anda «gigit» ke dalam, sehingga terpahat lekukan cekung sementara sisa elemen tetap solid. Beginilah cara potongan tiket, tepi kupon, dan bentuk tab mendapatkan lengkungan ke dalam mereka.

Alternatifnya adalah pseudo-element terposisi (::before atau ::after) yang diwarnai dengan warna latar halaman dan diberi border-radius ke luar sendiri, lalu ditumpuk di atas sudut sehingga tampak memotong ke dalam. Untuk tepi bergerigi atau berlubang — seperti garis sobek tiket — mask radial-gradient berulang di sepanjang satu sisi sudah cukup. Meski generator ini fokus pada radius cembung standar dan blob organik, memahami trik mask ini membantu Anda menutupi kasus cekung yang sebenarnya dicari orang lewat pencarian css inverted border radius generator.

Mengapa Generator Ini Lebih Unggul dari cssmatic.com dan bennettfeely.com

cssmatic.com menyediakan generator border-radius dasar tetapi sudah bertahun-tahun tidak diperbarui — tanpa unggah gambar, tanpa blob acak, dan tanpa preset bentuk modern. Almanak css-tricks.com adalah dokumentasi referensi yang bagus tetapi bukan alat interaktif. Clip-path maker bennettfeely.com kuat untuk bentuk poligon kompleks tetapi menargetkan CSS clip-path, bukan border-radius, dan menuntut input koordinat ala SVG alih-alih slider intuitif.

Generator border-radius UtiloKit menggabungkan semuanya dalam satu alat: editor langsung berbasis slider, pustaka preset untuk semua bentuk UI umum, pembuatan blob acak dengan sintaks slash 8 nilai tingkat lanjut, peralihan satuan px/%, pratinjau unggah gambar yang diproses 100% di sisi klien, dan tiga format keluaran (properti CSS, nilai saja, dan inline style React). Tanpa iklan, tanpa watermark, tanpa akun, dan tidak ada gambar atau data desain yang dikirim ke server mana pun.

px vs % vs Blob: Memilih Pendekatan yang Tepat

Gunakan px ketika Anda ingin ukuran sudut konsisten terlepas dari dimensi elemen — standar untuk komponen design system seperti kartu, input, modal, dan menu dropdown di mana ukuran sudut adalah design token yang tetap. Gunakan % ketika bentuk harus proporsional terhadap elemen — 50% selalu menghasilkan lingkaran pada elemen persegi dan elips pada persegi panjang, berapa pun dimensi piksel aslinya. Penting diketahui: persentase radius horizontal dihitung dari lebar elemen, sedangkan radius vertikal dari tingginya — sehingga 50% pada elemen 200 px × 100 px menghasilkan busur 100 px × 50 px, sebuah elips, bukan lingkaran.

Untuk bentuk blob dekoratif, klik Random Blob untuk menghasilkan nilai CSS asimetris 8 nilai seperti border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%. Setiap klik menghasilkan bentuk organik berbeda. Begitu menemukan blob yang Anda suka, salin CSS-nya dan terapkan pada elemen latar, pembatas dekoratif, atau ilustrasi hero abstrak. Fitur blob memakai sintaks slash di mana radius horizontal dan vertikal berbeda per sudut — bentuk yang mustahil dibuat dengan shorthand empat nilai saja. Sintaks yang sama menjadi dasar animasi blob morphing: dengan @keyframes Anda dapat berpindah dari satu set nilai blob ke set lain untuk gerakan organik yang mengalir; tambahkan will-change: border-radius pada elemen yang beranimasi terus-menerus karena animasi border-radius memicu repaint di setiap frame.

Pratinjau dengan Gambar Anda Sendiri — Sisi Klien, Privat, Instan

Unggah foto apa pun langsung ke area pratinjau untuk menguji tampilan border-radius pada gambar nyata. Gambar dimuat memakai File API browser dan dirender lewat object URL lokal — gambar tidak pernah meninggalkan perangkat Anda. Tanpa unggahan, tanpa pemrosesan server, tanpa penyimpanan cloud. Ini membuat alat ini sangat berguna saat mendesain avatar bulat, thumbnail media membulat, atau kartu galeri di mana bentuk potongan yang tepat sangat menentukan dan Anda ingin memverifikasi hasilnya sebelum menulis kode.

Di CSS, membulatkan gambar bisa dilakukan dua cara: terapkan border-radius langsung pada tag <img> untuk kesederhanaan, atau gunakan pembungkus <div> dengan overflow: hidden untuk fleksibilitas tata letak yang lebih besar. Pendekatan pembungkus memungkinkan Anda mengontrol rasio aspek, padding, dan posisi pada elemen luar, sementara border-radius memotong bagian yang meluap. Kedua pendekatan tersedia dalam keluaran CSS yang dihasilkan.

Lintas Perangkat: Desktop, iPhone, Android, dan Semua Browser Modern

Generator border-radius ini berjalan di browser modern mana pun tanpa instalasi. Di desktop, tata letak tiga kolom penuh menampilkan slider di kiri, pratinjau langsung besar di tengah, dan CSS yang dihasilkan di kanan. Di iPhone dan Android, tata letak menyesuaikan menjadi tumpukan vertikal satu kolom yang sepenuhnya ramah sentuhan. Slider merespons gestur sentuh-geser, pemilih gambar terintegrasi dengan file browser bawaan perangkat, dan tombol salin memakai Web Clipboard API yang didukung semua browser mobile modern.

Tidak ada yang diinstal, tidak ada login, dan tidak ada batasan pemakaian. Alat ini memproses seluruh input secara lokal dengan JavaScript sisi klien — slider memperbarui pratinjau tanpa latensi jaringan karena memang tidak ada server yang terlibat. Buat nilai border-radius untuk proyek apa pun — situs pribadi, pekerjaan klien, handoff desain, atau belajar CSS — dengan privasi penuh dan tanpa hambatan.

Border-Radius dalam Design System: Token Radius, Skala Bentuk, dan Squircle

Material Design 3 membakukan pembulatan sudut sebagai skala bentuk bertingkat: None (0 px), Extra Small (4 px), Small (8 px), Medium (12 px), Large (16 px), Extra Large (28 px), dan Full (9999 px), dengan tiap tingkat dipetakan ke jenis komponen tertentu — chip dan badge memakai Extra Small, kartu dan dialog memakai Medium, bottom sheet memakai Large, FAB memakai Full. Tailwind CSS menganut filosofi serupa dengan kelas utilitas bernama: rounded-sm (2 px), rounded (4 px), rounded-md (6 px), rounded-lg (8 px), rounded-xl (12 px), rounded-2xl (16 px), rounded-3xl (24 px), dan rounded-full (9999 px). Keduanya membuat pilihan mendasar yang sama: sedikit token semantik bernama, bukan nilai piksel arbitrer per komponen. Saat mengambil nilai dari generator, petakan ke token terdekat di sistem Anda alih-alih menulis angka piksel mentah — ini menjaga antarmuka tetap kohesif.

Alasan desainnya adalah koherensi: ketika setiap elemen produk mengambil ukuran sudut dari skala bertingkat yang sama, antarmuka terasa disengaja dan menyatu. Mencampur nilai sembarangan (3 px, 7 px, 11 px) antar komponen menciptakan ketegangan visual yang dirasakan pengguna sebagai penurunan kualitas, meski mereka tak bisa menjelaskan alasannya. Pengecualian yang disengaja adalah elemen interaktif: tombol, chip, dan toggle biasanya memakai radius lebih besar daripada wadah strukturalnya justru untuk menandakan affordance — tombol pil yang membulat penuh terasa «bisa ditekan» dibanding persegi panjang bersudut tajam.

Perlu diketahui pula konsep squircle: sejak iOS 7 (2013), setiap ikon aplikasi iPhone memakai bentuk di antara persegi dan lingkaran yang didefinisikan persamaan superelips |x/a|^n + |y/b|^n = 1 dengan eksponen n lebih besar dari 2 (squircle kanonik pada n = 4). Persegi panjang membulat CSS biasa dibangun dari sisi lurus yang disambung busur lingkaran, sehingga kelengkungannya berubah mendadak di sudut — sedangkan squircle memiliki kelengkungan yang berubah kontinu. border-radius saja tidak bisa merender squircle sejati; pendekatan yang wajar memakai clip-path: path() dengan path Bézier kubik SVG, dan Figma menyediakan toggle «smooth corners» untuk mengaproksimasinya. Fungsi CSS shape(), yang saat ini masih draft di balik flag browser, menjanjikan kelengkungan kontinu kualitas squircle secara native di masa depan. Untuk kerja UI praktis, squircle adalah penyempurnaan bagi permukaan kritikal brand (ikon aplikasi, ilustrasi hero) — bukan keharusan untuk pembulatan komponen sehari-hari.