Border Radius Generator

Bulatkan setiap sudut dengan slider, buat bentuk blob organik dengan mode elips, dan salin CSS secara instan.

Preset
Sudut
Semua sudut
24px
CSS
Geser slider untuk membulatkan sudut.

Setiap sudut digambar langsung di browser Anda. Tidak ada pengaturan yang Anda buat di sini yang diunggah ke BroBroGo.

Tanya Jawab

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.

CSS Cubic Bezier GeneratorGeser kedua handle untuk membentuk kurva easing, saksikan pergerakan titik animasi dibanding gerakan konstan, lalu salin nilai cubic-bezier().Box Shadow GeneratorGeser slider untuk membentuk box-shadow, tumpuk beberapa lapisan untuk efek kedalaman, dan salin kode CSS instan.Gradient GeneratorBuat gradien linear, radial, atau conic, tambahkan color stops dan tentukan arahnya, lalu salin kode CSS dalam sekali klik.Flexbox GeneratorAtur kontainer flex dan item di dalamnya dengan kontrol visual, lihat perubahan tata letak secara langsung, dan salin kode CSS dalam sekali klik.CSS Grid GeneratorAtur kolom dan baris Anda, seret kursor melewati sel untuk menempatkan item, lalu salin kode CSS grid beserta HTML yang cocok dalam sekali klik.Kalkulator CSS clamp()Masukkan ukuran untuk layar kecil dan besar, lalu dapatkan nilai clamp() dinamis yang berskala mulus di antaranya — cocok untuk ukuran font, padding, margin, atau gap.Konverter WarnaKonversi warna antara HEX, RGB, HSL, HSV, CMYK, dan LAB — cukup edit satu kolom dan kolom lainnya akan langsung menyesuaikan.