Generator CSS Border Radius
Kontrol semua 8 nilai border-radius secara visual.
Buat bentuk blob dengan pratinjau real-time.
Tentang
Generator CSS Border Radius memungkinkan Anda mengontrol secara visual semua 8 nilai border-radius (radius horizontal dan vertikal untuk masing-masing dari 4 sudut) dan melihat hasilnya secara real-time.
Selain sudut membulat normal, Anda dapat membuat bentuk blob yang kompleks seperti border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% — populer untuk dekorasi hero section. Semua pemrosesan dilakukan secara lokal di browser Anda.
Cara Pakai
Pilih Preset
Mulai dari preset (Lingkaran, Daun, Blob, dll.) untuk dengan cepat mendapatkan bentuk dasar, lalu sesuaikan dengan slider.
Sesuaikan Slider
Seret slider horizontal dan vertikal untuk setiap sudut. Pratinjau diperbarui secara instan.
Salin CSS
Klik "Salin" untuk menyalin CSS yang dihasilkan ke clipboard Anda dan tempelkan ke stylesheet Anda.
Glosarium
- border-radius
- Properti CSS yang membulatkan sudut elemen. Mendukung unit px dan % untuk setiap sudut secara terpisah.
- Radius Horizontal / Vertikal
- Dua radius elips yang didefinisikan oleh border-radius. Pemisah "/" memisahkan nilai horizontal (sebelum) dan vertikal (setelah).
- Blob
- Bentuk organik, tidak beraturan yang dibuat dengan menetapkan nilai border-radius asimetris pada semua 8 sumbu.
- clip-path
- Properti CSS untuk memotong elemen ke bentuk kustom. Lebih fleksibel dari border-radius, tetapi sintaksnya lebih kompleks.
- Shorthand
- border-radius: 10px 20px 30px 40px — menentukan keempat sudut dalam satu deklarasi. Gunakan "/" untuk memisahkan horizontal dan vertikal.
FAQ
- Q.Apa itu 8 nilai?
- Masing-masing dari 4 sudut memiliki radius horizontal dan vertikal, memberikan 8 nilai total. Format: border-radius: A B C D / E F G H.
- Q.Untuk apa bentuk blob digunakan?
- Dekorasi latar belakang hero section, masker gambar profil, bentuk tombol CTA, dan lainnya.
- Q.Apakah ada data yang dikirim ke server?
- Tidak. Semua dibuat secara lokal di browser Anda.
- Q.Apakah ini berfungsi di IE11?
- border-radius berfungsi dari IE9. Notasi elliptical (dengan "/") juga berfungsi dari IE9+.
- Q.Bisakah saya menggunakannya dengan Sass atau Less?
- Ya. Kode yang dihasilkan adalah CSS standar, sehingga langsung berfungsi dengan Sass, Less, dan Stylus.
Kasus Penggunaan
Desain Tombol & Kartu
Buat bentuk membulat unik untuk tombol dan komponen kartu di luar lingkaran standar.
Dekorasi Latar Blob
Gunakan bentuk blob organik untuk latar belakang hero section di halaman landing.
Masker Gambar Profil
Jelajahi masker yang tidak biasa untuk foto profil di luar lingkaran atau kotak standar.
Belajar CSS
Pahami cara kerja border-radius secara visual dengan bereksperimen dengan slider.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.