Apa itu Generator CSS Border Radius?

Generator CSS Border Radius adalah alat visual yang memungkinkan Anda membuat bentuk border-radius kustom dengan menyeret handle langsung pada preview langsung. Alih-alih menebak nilai CSS, Anda melihat bentuk berubah secara real-time saat Anda menyesuaikannya.

Alat ini mendukung mode Simple (4 nilai sudut) untuk sudut bulat standar dan mode Advanced (sintaks 8-nilai dengan horizontal/vertikal per sudut) untuk membuat bentuk blob organik, telur, tetes, dan bentuk kreatif lainnya.

Sempurna untuk: Alat ini menghilangkan proses trial-and-error dalam pengkodean manual nilai border-radius, memberikan Anda umpan balik visual instan dan kode CSS siap produksi.

Untuk siapa ini?

Web Developer

Membutuhkan nilai border-radius presisi untuk tombol, kartu, kontainer, dan komponen UI dengan akurasi pixel-perfect.

Desainer

Ingin mengeksplorasi bentuk blob organik untuk hero section, elemen dekoratif, dan desain UI modern.

Penggemar CSS

Siapa pun yang bekerja dengan CSS yang menginginkan cara lebih cepat dan intuitif untuk memvisualisasikan dan menghasilkan kode border-radius.

Cara Menggunakan

Penggunaan Dasar (Mode Simple)

Sesuaikan Nilai Sudut

Gunakan slider atau ketik nilai dalam input angka untuk mengatur radius setiap sudut (Top Left, Top Right, Bottom Right, Bottom Left).

Lock atau Unlock Sudut

Toggle Lock All untuk membuat semua sudut berubah bersama, atau unlock untuk menyesuaikan setiap sudut secara independen untuk bentuk asimetris.

Drag Handle

Preview bentuk diperbarui secara instan — Anda juga dapat menyeret handle langsung pada bentuk untuk editing visual yang intuitif.

Copy Kode CSS

Salin kode CSS yang dihasilkan dengan tombol Copy CSS dan tempel langsung ke stylesheet Anda.

Membuat Bentuk Organik (Mode Advanced)

Beralih ke Mode Advanced

Beralih ke mode Advanced untuk mengakses 8 nilai — setiap sudut mendapat kontrol radius horizontal (H) dan vertikal (V) terpisah.

Gunakan Sintaks Slash

Ini mengaktifkan sintaks slash CSS: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4 untuk sudut elips dan bentuk organik.

Fine-Tune dengan 8 Handle

Seret 8 handle di sepanjang tepi bentuk, atau gunakan slider untuk kontrol presisi atas nilai radius horizontal dan vertikal.

Hasilkan Bentuk Acak

Klik Random untuk menghasilkan bentuk blob menarik secara instan — sempurna untuk eksplorasi kreatif dan desain unik.

Menggunakan Preset

Klik toggle Presets untuk mengungkap 12 bentuk bawaan termasuk Rounded, Pill, Circle, Leaf, Drop, Egg, dan berbagai gaya Blob. Mengklik preset secara otomatis menerapkan nilainya dan beralih ke mode yang sesuai.

Quick Start: Preset adalah cara tercepat untuk memulai. Pilih preset yang paling dekat dengan bentuk yang Anda inginkan, kemudian fine-tune dengan slider atau drag handle.

Kalkulator Nested Radius

Saat menempatkan elemen anak bulat di dalam parent bulat dengan padding, radius dalam harus dihitung sebagai: inner = max(0, outer - padding). Buka bagian Nested Radius Calculator, masukkan radius luar dan padding, dan alat menghitung radius dalam yang benar dengan preview visual.

Tanpa Perhitungan

Radii Tidak Cocok

Sudut dalam tidak selaras dengan luar
Celah visual yang canggung
Penampilan tidak profesional

Dengan Perhitungan

Penyelarasan Sempurna

Radius dalam yang benar secara matematis
Kurva halus dan konsisten
Tampilan profesional dan polished

Fitur

Dua Mode Editing

Mode Simple menyediakan 4 slider untuk sudut bulat standar. Mode Advanced mengekspos sintaks CSS border-radius 8-nilai penuh, memungkinkan Anda mengatur radius horizontal dan vertikal independen per sudut untuk bentuk blob organik.

Drag Handle Visual

Drag handle ditempatkan langsung pada preview bentuk. Dalam mode Simple, 4 handle berada di sudut. Dalam mode Advanced, 8 handle muncul di sepanjang tepi dengan garis panduan yang menunjukkan arah radius.

Toggle Unit (px / %)

Beralih antara unit pixel dan persentase. Nilai secara otomatis dikonversi saat Anda toggle, sehingga bentuk Anda tetap konsisten di seluruh sistem unit berbeda.

Lock Semua Sudut

Saat terkunci, menyesuaikan sudut apa pun menerapkan nilai yang sama ke keempat sudut untuk pembulatan seragam. Unlock untuk kontrol individual dan desain asimetris.

12 Preset Bawaan

Terapkan dengan cepat bentuk umum: Rounded, Pill, Circle, Leaf, Ticket, Drop, Egg, Blob (3 varian), Badge, dan Message. Setiap preset menampilkan preview bentuk mini untuk pemilihan mudah.

Randomize

Hasilkan bentuk organik acak dengan satu klik. Alat secara otomatis beralih ke mode Advanced dan membuat bentuk seperti blob unik yang sempurna untuk proyek kreatif.

Preview yang Dapat Disesuaikan

Sesuaikan dimensi preview (lebar dan tinggi dari 100px hingga 500px) untuk menguji tampilan border-radius Anda pada ukuran elemen berbeda. Ubah warna bentuk dan warna latar belakang dengan pemilih warna bawaan.

Kalkulator Nested Radius

Utilitas yang dapat dilipat yang menghitung border-radius dalam yang benar ketika elemen anak berada di dalam parent bulat dengan padding. Masukkan radius luar dan padding untuk mendapatkan radius dalam yang benar secara matematis, dengan preview visual.

Output CSS Instan

Kode CSS yang dihasilkan diperbarui secara real-time dan dapat disalin ke clipboard Anda dengan satu klik. Output menggunakan notasi shorthand dan menyertakan sintaks slash ketika nilai horizontal dan vertikal berbeda.

Pertanyaan yang Sering Diajukan

Apa perbedaan antara mode Simple dan Advanced?

Mode Simple menggunakan border-radius 4-nilai standar (satu nilai per sudut) — sempurna untuk tombol, kartu, dan elemen UI standar dengan sudut bulat melingkar.

Mode Advanced menggunakan sintaks CSS 8-nilai di mana setiap sudut memiliki radius horizontal dan vertikal terpisah, memungkinkan bentuk blob organik, sudut elips, dan bentuk kreatif yang tidak mungkin dengan 4 nilai.

Apa arti slash (/) dalam border-radius?

Properti CSS border-radius mendukung sintaks slash: border-radius: H1 H2 H3 H4 / V1 V2 V3 V4.

Nilai sebelum slash mengontrol radius horizontal, dan nilai setelah mengontrol radius vertikal. Ketika ini berbeda, sudut menjadi elips daripada melingkar, menciptakan bentuk organik seperti telur, tetes, dan blob.

Contoh: border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% membuat bentuk seperti telur dengan kelengkungan horizontal dan vertikal berbeda.

Haruskah saya menggunakan px atau % untuk border-radius?

Pilihan tergantung pada kasus penggunaan Anda:

Gunakan px untuk elemen ukuran tetap seperti tombol dan ikon di mana Anda menginginkan kontrol tepat dan pembulatan konsisten terlepas dari ukuran elemen
Gunakan % untuk elemen responsif atau saat membuat bentuk blob/organik — 50% pada persegi membuat lingkaran sempurna, dan nilai persentase diskalakan secara proporsional dengan dimensi elemen

Pro tip: Untuk desain responsif, nilai persentase sering kali bekerja lebih baik karena mempertahankan pembulatan proporsional saat elemen diubah ukurannya.

Untuk apa Nested Radius Calculator?

Ketika Anda memiliki elemen parent bulat dengan padding, anak dalam membutuhkan border-radius lebih kecil untuk terlihat benar dan mempertahankan harmoni visual.

Rumusnya adalah: inner radius = max(0, outer radius - padding)

Contoh: Kartu dengan border-radius 16px dan padding 8px membutuhkan radius dalam 8px pada area konten. Tanpa perhitungan ini, sudut dalam tidak akan selaras dengan benar dengan kurva luar, menciptakan celah visual yang canggung.

Kesalahan umum: Menggunakan nilai border-radius yang sama untuk elemen parent dan child ketika padding ada — ini menciptakan sudut yang tidak selaras dan penampilan tidak profesional.

Bisakah saya menggunakan CSS yang dihasilkan di framework apa pun?

Ya. Output adalah CSS standar yang bekerja di semua browser modern dan kompatibel dengan framework atau lingkungan pengembangan apa pun.

Anda dapat menempel langsung ke:

Stylesheet CSS standar (file .css)
Inline style dalam HTML
Solusi CSS-in-JS (styled-components, Emotion, dll.)
CSS modules
Nilai arbitrary Tailwind CSS
Preprocessor apa pun (SCSS, LESS, Stylus)

Kode yang dihasilkan menggunakan properti CSS standar dengan dukungan browser yang sangat baik (IE9+, semua browser modern).