Generator Border Radius

• Pratinjau Langsung & CSS Instan: Generator memperbarui pratinjau langsung dan keluaran CSS pada setiap perubahan — tanpa tombol yang perlu ditekan. Lihat dengan tepat bagaimana setiap radius sudut memengaruhi bentuk dan salin deklarasi CSS dengan satu klik.
• Kontrol Seragam & Per Sudut: Beralih antara mode seragam (satu penggeser untuk semua sudut) dan mode per sudut (nilai independen untuk setiap sudut). Pilih satuan Anda — px untuk kotak standar dan % untuk bentuk elips.
• 100% Privat - Tanpa Unggah: Semua pembuatan border radius terjadi lokal di browser Anda. Pilihan desain Anda tidak pernah meninggalkan perangkat dan tidak pernah dikirim ke server mana pun — aman untuk proyek klien dan sistem desain proprietary.
• Gratis & Tanpa Batas: Buat gaya border radius tanpa batas tanpa pendaftaran, langganan, dan batas penggunaan. Generator ini sepenuhnya gratis selamanya tanpa iklan yang menghalangi antarmuka.

• Desain Kartu & Komponen: Desainer UI menggunakan generator untuk menata komponen kartu, dialog modal, tooltip, dan menu dropdown. Pratinjau visual memudahkan menemukan radius sudut sempurna yang sesuai sistem desain — dari 4 px yang halus hingga 16 px yang lapang.
• Serah Terima Desain ke Kode: Desainer menggunakan generator untuk mengekstrak nilai CSS tepat dari mockup visual dan menyerahkannya ke pengembang. Tak perlu lagi mengukur piksel atau menebak — salin deklarasi border-radius tepat dan tempel ke kode.
• Penataan Gambar & Avatar: Pengembang web menggunakan generator untuk menata avatar profil (bundar pada 50%), gambar produk (membulat pada 8-12 px), dan galeri thumbnail. Mode % menciptakan bentuk elips dan bundar sempurna untuk gambar dengan rasio apa pun.
• Desain UI Aplikasi Mobile: Pengembang mobile menggunakan generator untuk menata bentuk tombol, tepi kartu, dan header bottom sheet. Kontrol per sudut memungkinkan bentuk asimetris yang mengikuti pola UI mobile modern seperti ikon squircle gaya iOS.
• Pembelajaran & Eksperimen CSS: Pengembang frontend yang mempelajari CSS menggunakan generator untuk memahami secara visual cara kerja border-radius. Pratinjau langsung dan kontrol per sudut memudahkan melihat bagaimana setiap nilai memengaruhi bentuk akhir — alat sempurna untuk belajar CSS.
• Penataan Tombol & Elemen Formulir: Pengembang UX menggunakan generator untuk menata tombol, kolom input, bilah pencarian, dan kontrol formulir. Menyamakan border-radius pada elemen formulir terkait menciptakan konsistensi visual dan pengalaman yang rapi.

Properti CSS border-radius membulatkan sudut tepi luar elemen. Anda dapat menetapkan satu radius untuk keempat sudut (dengan nilai tunggal seperti border-radius: 8px), dua nilai untuk pasangan diagonal (8px 16px), atau empat nilai untuk setiap sudut secara individual (8px 4px 8px 4px). Urutannya kiri atas, kanan atas, kanan bawah, kiri bawah — searah jarum jam mulai dari atas. Generator border radius kami menangani semua format ini dan menghasilkan CSS bersih yang siap produksi.

1. Pilih Mode Input Anda: Gunakan mode Seragam untuk mengontrol keempat sudut dengan satu penggeser — sempurna untuk pembulatan yang konsisten. Beralih ke mode Per Sudut untuk mengatur setiap sudut secara independen menggunakan input angka terpisah yang tersusun dalam kisi 2×2 yang mencerminkan tata letak elemen.
2. Sesuaikan Nilai dan Satuan: Geser penggeser atau ketik nilai secara langsung. Beralih antara px (piksel untuk pembulatan berukuran tetap) dan % (persentase untuk bentuk elips/bundar). Pratinjau langsung diperbarui seketika, menampilkan nilai radius tepat setiap sudut di atas kotak pratinjau.
3. Salin CSS: Klik «Salin CSS» untuk menyalin deklarasi CSS siap produksi ke clipboard. Generator menghasilkan format singkat optimal — satu nilai, dua nilai, atau empat nilai bergantung konfigurasi sudut Anda.

• px (Piksel): Pembulatan berukuran tetap yang tidak berubah saat elemen diubah ukurannya. Gunakan px untuk komponen UI standar seperti tombol, kartu, dan modal di mana Anda menginginkan pembulatan sudut konsisten terlepas dari ukuran elemen. Nilainya biasanya berkisar dari 2 px (halus) hingga 24 px (sangat membulat).
• % (Persentase): Pembulatan relatif yang berskala dengan ukuran elemen. Gunakan 50% untuk membuat lingkaran sempurna atau bentuk pil. Gunakan persentase lebih rendah untuk pembulatan elips yang beradaptasi dengan dimensi elemen berbeda. Nilai persentase dibatasi 50% untuk bentuk bundar.

Properti border-radius didukung di semua browser modern tanpa prefiks vendor. Ini juga mendukung varian properti logis border-start-start-radius dan sejenisnya untuk dukungan RTL dan mode penulisan vertikal. Untuk elemen bundar, gunakan 50%; untuk tombol berbentuk pil, gunakan nilai lebih besar dari tinggi elemen (mis. 9999px) yang dibatasi ke radius maksimum yang mungkin.