Memahami Properti CSS border-radius
Properti border-radius dalam CSS digunakan untuk mengatur tingkat kebulatan pada sudut-sudut elemen kotak. Alat Border Radius Generator memetakan kontrol sudut ini searah jarum jam, dimulai dari sudut kiri atas, kanan atas, kanan bawah, hingga kiri bawah.
Secara default, alat ini memulai pengaturannya dengan nilai slider 24, yang menghasilkan kode CSS border-radius: 24px;. Melalui antarmuka visual ini, Anda dapat memanipulasi bentuk elemen secara langsung dan melihat perubahan bentuknya pada area pratinjau sebelum menyalin kode CSS yang dihasilkan.
Perbedaan Satuan Piksel dan Persentase
Dalam menentukan kebulatan sudut, pemilihan satuan ukuran sangat memengaruhi bagaimana elemen tersebut merespons perubahan ukuran. Border Radius Generator menyediakan opsi untuk beralih antara dua satuan utama melalui pemilih satuan:
- Piksel (px): Saat menggunakan satuan piksel, sudut elemen akan membulat dengan nilai yang tetap. Ukuran radius sudut tidak akan berubah meskipun ukuran elemen kotak tersebut membesar atau mengecil.
- Persen (%): Saat menggunakan satuan persen, sudut elemen akan membulat secara relatif terhadap dimensi kotak itu sendiri. Radius horizontal akan mengikuti persentase dari lebar elemen, sedangkan radius vertikal akan mengikuti persentase dari tinggi elemen. Karakteristik ini sangat berguna dalam penerapan desain web yang responsif.
Membuat Sudut Membulat Standar dan Bentuk Elips
Secara default, ketika mode elips dinonaktifkan, setiap sudut elemen berupa seperempat lingkaran dengan radius tunggal. Namun, untuk kebutuhan desain yang lebih kompleks, Anda dapat mengaktifkan mode elips.
Pada mode elips, setiap sudut memiliki radius horizontal dan vertikal yang terpisah. Hal ini memungkinkan pembuatan bentuk-bentuk yang lebih lembut dan organik, seperti bentuk "blob". Ketika mode elips aktif, generator akan menuliskan format kode CSS dengan tanda garis miring (/) untuk memisahkan nilai horizontal dan vertikal. Jika sudut-sudut tersebut dikembalikan ke bentuk membulat standar (lingkaran), generator secara otomatis akan kembali menggunakan format penulisan kode CSS yang pendek tanpa tanda garis miring.
Teknik Membuat Lingkaran Sempurna dan Bentuk Pil
Dengan memanipulasi hubungan antar-sudut dan satuan ukuran, Anda dapat membuat bentuk geometris spesifik secara presisi:
- Lingkaran Sempurna: Untuk mengubah elemen kotak persegi menjadi lingkaran sempurna, Anda perlu menautkan semua sudut, mengubah satuan ke persen (%), lalu menggeser nilai ke 50%. Pengaturan ini akan membuat radius pembulatan memakan tepat setengah dari lebar dan tinggi elemen.
- Bentuk Pil: Untuk membuat tombol berbentuk pil, Anda harus tetap menggunakan satuan piksel (px). Geser slider sudut hingga melewati setengah dari tinggi tombol tersebut. Dengan metode ini, sisi-sisi tombol akan tetap membulat penuh secara konsisten pada lebar elemen berapa pun.
Menggunakan Preset untuk Mempercepat Desain
Untuk mempercepat proses kerja, Border Radius Generator menyediakan beberapa tombol preset instan yang dapat langsung diaplikasikan pada kotak pratinjau. Setiap preset dirancang untuk menghasilkan karakteristik bentuk tertentu:
| Nama Preset | Deskripsi Bentuk yang Dihasilkan |
|---|---|
| Tajam | Mengembalikan semua sudut ke nilai 0 untuk menghasilkan sudut kotak siku-siku yang tajam. |
| Membulat | Memberikan pembulatan standar yang proporsional pada setiap sudut kotak. |
| Lingkaran | Mengatur seluruh sudut ke nilai 50% secara instan untuk membuat bentuk lingkaran dari elemen persegi. |
| Blob | Menghasilkan bentuk organik yang tidak simetris dengan memanfaatkan mode elips. |
| Daun | Mengatur sudut-sudut secara asimetris sehingga menyerupai bentuk daun. |
Cara Menggunakan Border Radius Generator
Proses pembuatan dan penerapan CSS border-radius menggunakan alat ini dapat dilakukan dengan langkah-langkah berikut:
- Tentukan Hubungan Sudut: Gunakan opsi "Tautkan semua sudut" jika Anda ingin seluruh sudut berubah secara bersamaan menggunakan satu slider "Semua sudut". Matikan opsi ini jika Anda ingin mengatur slider "Kiri atas", "Kanan atas", "Kanan bawah", dan "Kiri bawah" secara individual.
- Aktifkan Mode Elips (Opsional): Jika Anda membutuhkan bentuk organik, aktifkan "Sudut elips" untuk memunculkan slider "Horizontal" dan "Vertikal" pada masing-masing sudut.
- Pilih Satuan: Tentukan satuan ukuran yang diinginkan pada bagian "Satuan", baik menggunakan "px" maupun "%".
- Sesuaikan Slider: Geser slider yang memiliki rentang nilai 0-100 hingga Anda mendapatkan bentuk yang diinginkan pada kotak pratinjau.
- Salin Kode CSS: Setelah bentuk visual sesuai, lihat kode yang dihasilkan di bawah bagian "CSS", lalu klik tombol "Salin CSS" untuk menyalin kode tersebut ke papan klip Anda. Anda dapat langsung menempelkan kode tersebut ke dalam file stylesheet proyek web Anda.
Pemrosesan Data dan Privasi Pengguna
Keamanan data Anda tetap terjaga selama menggunakan alat ini. Setiap sudut digambar langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo. Seluruh proses kalkulasi nilai slider dan pembuatan kode CSS dilakukan secara lokal pada perangkat yang Anda gunakan.
Pertanyaan yang Sering Diajukan (FAQ)
Bagaimana cara kerja keempat sudut dan perbedaan px vs %? Keempat slider memetakan sudut searah jarum jam, mulai dari kiri atas, kanan atas, kanan bawah, lalu kiri bawah. Dalam piksel (px), sudut membulat dengan nilai tetap; dalam persen (%), sudut membulat secara relatif terhadap kotak — persen horizontal mengikuti lebar dan persen vertikal mengikuti tinggi, sehingga nilai 50% akan mengubah kotak menjadi lingkaran.
Apa kegunaan mode elips? Jika dinonaktifkan, setiap sudut berupa seperempat lingkaran dengan radius tunggal. Aktifkan mode ini, dan setiap sudut akan memiliki radius horizontal dan vertikal yang terpisah. Ini adalah cara untuk membuat bentuk "blob" yang lembut dan organik. Generator ini akan menuliskan format garis miring dua nilai untuk Anda dan otomatis kembali ke format pendek setelah sudut-sudutnya membulat kembali.
Bagaimana cara membuat lingkaran sempurna atau bentuk pil? Tautkan sudut-sudutnya, ubah satuan ke persen dan atur ke 50%: kotak akan berubah menjadi lingkaran sempurna. Untuk tombol berbentuk pil, tetap gunakan piksel dan geser sudut melewati setengah tinggi tombol — sisi-sisinya akan tetap membulat penuh pada lebar berapa pun. Preset Lingkaran dapat mengatur skenario pertama hanya dengan sekali klik.