CSS Border Radius Generator

Generator border-radius CSS ini memungkinkan Anda merancang sudut melengkung secara visual dan menyalin CSS yang rapi dalam hitungan detik. Seret handle pada bentuk langsung, ketik nilai yang presisi, atau pilih preset, dan kode border-radius langsung diperbarui seketika.

Gunakan mode Sederhana untuk sudut melengkung sehari-hari pada tombol, kartu, dan input, atau beralih ke mode Lanjutan untuk sintaks garis miring 8 nilai penuh yang membuat bentuk blob organik, telur, tetesan, dan bentuk bebas lainnya. Alat ini cocok untuk developer yang menginginkan nilai presisi sekaligus desainer yang menjelajahi bentuk dekoratif.

Privat sejak awal: setiap bentuk, nilai, dan warna dihitung langsung di peramban Anda. Apa pun yang Anda ketik atau hasilkan tidak pernah diunggah ke server.

Cara Menggunakan

Atur setiap sudut

Dalam mode Sederhana, gunakan penggeser atau input angka untuk Kiri Atas, Kanan Atas, Kanan Bawah, dan Kiri Bawah. Biarkan Kunci Semua aktif untuk menggerakkan semua sudut bersamaan, atau buka kuncinya untuk membentuk setiap sudut sendiri-sendiri.

Seret pada pratinjau

Genggam handle langsung pada bentuk hidup untuk membulatkan sudut sesuai perasaan. Pratinjau, handle, dan output CSS semuanya diperbarui seketika saat Anda menyeret.

Buka mode Lanjutan atau pilih preset

Beralih ke mode Lanjutan untuk radius horizontal dan vertikal terpisah per sudut serta sintaks H1 H2 H3 H4 / V1 V2 V3 V4, atau buka Preset untuk menerapkan bentuk siap pakai. Tekan Bentuk acak untuk blob instan.

Salin CSS

Deklarasi border-radius yang dihasilkan selalu ditampilkan di bawah pratinjau. Klik Salin CSS untuk mengirimnya ke clipboard dan menempelkannya langsung ke stylesheet Anda.

Fitur

Mode Sederhana & Lanjutan

Mode Sederhana memberi 4 kontrol sudut untuk pembulatan standar; mode Lanjutan membuka sintaks 8 nilai penuh dengan radius horizontal dan vertikal mandiri per sudut.

Handle Seret Visual

Handle seret berada langsung pada bentuk — 4 di sudut pada mode Sederhana, 8 di sepanjang tepi dengan garis bantu pada mode Lanjutan.

Satuan Piksel & Persen

Beralih antara px dan % kapan saja. Nilai Anda saat ini dikonversi otomatis sehingga bentuk tetap konsisten.

Kunci Semua Sudut

Kunci untuk menerapkan satu nilai ke keempat sudut sekaligus, atau buka kunci untuk menyetel setiap sudut secara mandiri.

12 Preset Bawaan

Satu klik menerapkan Membulat, Pil, Lingkaran, Daun, Tiket, Tetesan, Telur, Blob 1–3, Lencana, atau Pesan — masing-masing ditampilkan sebagai pratinjau bentuk mini.

Acak Bentuk

Bentuk acak beralih ke mode Lanjutan dan menghasilkan blob organik baru setiap kali Anda mengeklik.

Pratinjau yang Dapat Diatur

Ubah ukuran lebar dan tinggi pratinjau dari 100px hingga 500px untuk melihat tampilan radius Anda pada ukuran elemen yang berbeda.

Pemilih Warna

Atur warna bentuk dan latar belakang sehingga Anda dapat melihat pratinjau sudut terhadap warna yang benar-benar Anda gunakan.

Kalkulator Radius Bersarang

Masukkan radius luar dan padding untuk mendapatkan radius dalam yang tepat bagi elemen anak, lengkap dengan pratinjau visual penyarangannya.

CSS Instan & Salin

CSS diperbarui secara real-time, menggunakan notasi singkat dengan sintaks garis miring saat diperlukan, dan disalin ke clipboard dengan satu klik.

Pertanyaan yang Sering Diajukan

Bagaimana cara membuat sudut melengkung di CSS?

Terapkan properti border-radius, misalnya border-radius: 12px;. Dengan generator ini Anda mengatur setiap sudut secara visual dan menyalin deklarasi yang persis, jadi Anda tidak perlu menebak nilai atau mengingat urutan sudut.

Apa arti keempat nilai border-radius?

Saat Anda memberi empat nilai, nilai-nilai itu diterapkan searah jarum jam mulai dari kiri atas: Kiri Atas, Kanan Atas, Kanan Bawah, Kiri Bawah. Kontrol mode Sederhana diberi label dengan sudut-sudut yang persis ini, jadi nilai yang Anda ubah sesuai dengan sudut yang Anda lihat.

Bagaimana membuat lingkaran sempurna dengan border-radius?

Atur setiap sudut ke 50% pada elemen berbentuk persegi. Preset Lingkaran bawaan melakukan ini untuk Anda — cukup jaga lebar dan tinggi pratinjau tetap sama agar menjadi lingkaran sejati, bukan oval.

Bagaimana melengkungkan hanya sudut atas?

Matikan Kunci Semua, lalu naikkan hanya Kiri Atas dan Kanan Atas sambil membiarkan sudut bawah tetap 0. Outputnya menjadi seperti border-radius: 16px 16px 0 0;, yang ideal untuk tab dan header kartu.

Apa itu sintaks garis miring pada border-radius?

Sintaks lengkapnya adalah border-radius: H1 H2 H3 H4 / V1 V2 V3 V4. Nilai sebelum garis miring mengatur radius horizontal setiap sudut dan nilai sesudahnya mengatur radius vertikal. Saat keduanya berbeda, sudut menjadi elips, dan begitulah bentuk blob organik dibuat. Beralihlah ke mode Lanjutan untuk menyunting kedelapan nilai ini.

Sebaiknya pakai px atau % untuk border-radius?

Gunakan px untuk elemen berukuran tetap seperti tombol dan ikon saat Anda menginginkan sudut yang presisi. Gunakan % untuk elemen responsif dan bentuk organik — 50% pada persegi membuat lingkaran. Tombol satuan akan mengonversi nilai Anda saat ini ketika Anda beralih.

Untuk apa Kalkulator Radius Bersarang?

Saat elemen anak yang membulat berada di dalam induk yang membulat dan memiliki padding, radius dalam sebaiknya lebih kecil agar terlihat pas. Rumusnya adalah dalam = max(0, luar − padding). Masukkan radius luar dan padding, lalu kalkulator mengembalikan radius dalam yang tepat lengkap dengan pratinjau visual — misalnya, induk 16px dengan padding 8px menghasilkan radius dalam 8px.

Bisakah CSS yang dihasilkan dipakai di framework apa pun?

Bisa. Outputnya adalah CSS biasa berbasis standar yang bekerja di setiap peramban modern. Tempelkan ke stylesheet, gaya inline, atau solusi CSS-in-JS tanpa perubahan apa pun.