Generator Border Radius CSS
Generator border-radius CSS visual. Sesuaikan setiap sudut secara independen dengan pratinjau real-time dan salin kode CSS secara instan.
Apa itu CSS border-radius?
CSS border-radius adalah properti yang membulatkan sudut batas luar elemen. Anda dapat mengatur setiap sudut secara independen menggunakan satu hingga empat nilai.
Bagaimana membuat lingkaran sempurna dengan border-radius?
Atur border-radius ke 50% pada elemen persegi (lebar dan tinggi sama). Untuk elips, gunakan border-radius: 50% pada elemen persegi panjang.
Unit apa yang bisa saya gunakan untuk border-radius?
Border-radius menerima px, %, em, rem, vw, vh dan unit panjang CSS lainnya. Persentase relatif terhadap dimensi elemen.
Apa sintaks singkat untuk border-radius?
Singkatan mengikuti pola: kiri-atas kanan-atas kanan-bawah kiri-bawah. Satu nilai berlaku untuk semua sudut. Dua nilai mengatur kiri-atas/kanan-bawah dan kanan-atas/kiri-bawah.
Bisakah saya membuat sudut elips?
Ya, menggunakan sintaks garis miring (/) Anda dapat menentukan radius horizontal dan vertikal terpisah. Misalnya border-radius: 50% / 100px.
Apakah border-radius bekerja di semua elemen?
Border-radius bekerja di sebagian besar elemen HTML termasuk div, button, img dan input. Namun mungkin tidak memotong konten overflow tanpa overflow: hidden.
Bisakah saya membuat bentuk kompleks dengan border-radius?
Ya, dengan menggabungkan nilai radius berbeda untuk setiap sudut, Anda dapat membuat pil, oval, daun, dan bentuk organik kustom.
Apakah border-radius didukung di semua browser?
Ya, border-radius didukung di semua browser modern termasuk Chrome, Firefox, Safari, Edge dan browser mobile.
Bagaimana membuat tombol berbentuk pil?
Atur border-radius ke nilai yang sama atau lebih besar dari setengah tinggi elemen. Untuk tombol setinggi 40px, gunakan border-radius: 20px atau lebih tinggi.
Apakah border-radius memengaruhi gambar latar belakang?
Ya, border-radius memotong latar belakang, gambar latar belakang dan batas elemen. Latar belakang secara otomatis mengikuti sudut membulat.
Bisakah saya menganimasikan border-radius?
Ya, border-radius dapat dianimasikan dengan transisi dan animasi CSS. Anda dapat bertransisi mulus antara nilai radius berbeda.
Bisakah saya menggunakan border-radius dengan transform CSS?
Ya, border-radius bekerja baik dengan transformasi CSS seperti rotate, scale dan translate.
Bagaimana membuat lingkaran dengan border?
Terapkan border-radius: 50% pada elemen persegi dengan lebar dan tinggi sama, lalu tambahkan properti border.
Apa perbedaan antara properti sudut individual dan singkatan?
Properti individual seperti border-top-left-radius memberi Anda kontrol presisi atas setiap sudut. Singkatan memungkinkan Anda mengatur beberapa sudut dalam satu deklarasi.